jQuery不格式化html正确

Question

I can upload a picture of the problem if you need one, but I need the last item to look like the rest. I read an rss feed and grab the first title, then populate it in the list. I try to format it like the rest, but it is not working. Here is my function:

<script type="text/javascript">

jQuery(function() {

    jQuery.getFeed({
        url: 'xml/rss-21.xml',
        success: function(feed) {

            var html = '';

            for(var i = 0; i < 1; i++) {

                var item = feed.items[i];


                html += '<li data-theme="c">'
                + '<a href="#page1" data-transition="slide">'
                + item.link
                + '">'
                + item.title
                + '</a>'
                + '</li>';
            }

            jQuery('#result').append(html);
        }    
    });
});

</script>

I need it to formatted like:

<li data-theme="c">
                    <a href="http://www.tristateis.com" data-transition="slide">
                        Win a Free Digital Pocket Memo
                    </a>
                </li>

Thank you for your help.

Answer 1

The problem seems to be on when you're appending to html :

html += '<li data-theme="c">'
            + '<a href="#page1" data-transition="slide">'
            + item.link
            +" "               
            + item.title
            + '</a>'
            + '</li>';

Also what you can do to get more control than just formatting a string is to do this:

var li = $('<li></li>',{
   'data-theme' : 'c',
});

var link = $('<a></a>',{
    href : item.link
    text : item.title,
    'data-transition' : 'slide'
});

And then just li.append(a); that way it's easier to edit and it's also a better practice

Answer 2

html += '<li data-theme="c">'
+ '<a href="#page1" data-transition="slide">'
+ item.link
+ '">' // problem here
+ item.title
+ '</a>'
+ '</li>';

should be

html += '<li data-theme="c">'
+ '<a href="#page1" data-transition="slide">'
+ item.link
+ item.title
+ '</a>'
+ '</li>';

EDIT:

you need to put the link in the right place:

html += '<li data-theme="c">'
+ '<a data-transition="slide" href="'
+ item.link + '" >'
+ item.title
+ '</a>'
+ '</li>';

Answer 3

Looks like you're not actually making a link here, the href should be item.link (assuming that's the correct value)

html += '<li data-theme="c">'
        + '<a href="' + item.link +'" data-transition="slide">'
        + item.title
        + '</a>'
        + '</li>';