javascript - 将每个列表数组包装在一个标签中

Question

我试图将每个帖子列表都包含在 href 中，以便可以单击它。基本上，当我尝试点击每个帖子时，它不会起作用，直到我将鼠标悬停在每个帖子的顶部附近才起作用。

下面是我的代码以及我的意思的图像:

JS:

function getPosts(data) {
    var $output = $('<ul class="posts" data-role="listview" data-filter="true">')
    $.each(data.posts,function(i, val) {   
        $('<li><a href="#devotionpost" onclick="showPost(' + val.id + ')"</a>').append([$("<h3>", {html: val.title}),$("<p>", {html: val.excerpt})]).appendTo($output);
        if ( i == 3 ) return false;
       // return (postlimit-- > 1);
    });
    $('#postlist').empty().append($output);
}

function showPost(id) {
    $('#mypost').html('<span class="img_spin">Loading post...</span>');
    $.getJSON('http://howtodeployit.com/category/daily-devotion/?json=get_post&post_id=' + id + '&callback=?', function(data) {
        var posts='';
        posts += '<h3>' + data.post.title + '</h3>';
        posts += data.post.content;
        $('#mypost').html(posts);
    });
}

图片:

如果你看图片，当我将鼠标悬停在帖子的顶部边缘附近时，底部的 URL 会显示并且有效，但其他任何地方都无效。

Answer 1

查看 this demo 中的 Chrome Elements 标签由于结束元素不匹配，JavaScript 正在生成无效的 HTML。

使用 var posts = { "posts" : [ {"id":"1", "title":"lorem", "excerpt":"foo"}, {"id":"2", "title":"ipsum", "excerpt":"bar"} ] } 的帖子示例

这'<li><a href="#devotionpost" onclick="showPost(' + val.id + ')"</a>'导致以下 <li> 的第一个 child 破损:

<li>
    <a href="#devotionpost" onclick="showPost(1)" < a></a>
    <h3>lorem</h3>
    <p>foo</p>
</li>

根据您想在 anchor 元素中包装的确切内容，您可以只构建帖子 <li>就像在this updated demo或查看下面的代码:

$.each(data.posts,function(i, val) {
    $output.append('<li><a href="#devotionpost" onclick="showPost(' + val.id + ')"><h3>' + val.title + '</h3><p>' + val.excerpt + '</p></a></li>');
});

或者如果你想减少字符串连接，你可以使用 .wrapInner()

$.each(data.posts,function(i, val) {
    var $post = $('<li><h3>' + val.title + '</h3><p>' + val.excerpt + '</p></li>');
    $post.wrapInner('<a href="#devotionpost" onclick="showPost(' + val.id + ')"></a>');
    $output.append($post);
});

或者保留您的 .append()方法:

$.each(data.posts,function(i, val) {
    var $post = $('<li/>').append([$("<h3>", {html: val.title}),$("<p>", {html: val.excerpt})]).wrapInner('<a href="#devotionpost" onclick="showPost(' + val.id + ')"></a>');
    $output.append($post);
});

注意:字符串连接方法，结合单个 .append()是best performing code .