Javascript 将每个列表数组包装在标记中

我正在尝试将每个帖子列表包装在href中，以便单击。基本上，当我试着点击每一篇文章时，它不起作用，直到我将鼠标悬停在每一篇文章的顶部，它才起作用

下面是我的代码，也是我的意思：

JS:

函数getPosts（数据）{
var$output=$（“
”）
$.each（data.posts，function（i，val）{
$（“
从外观上看，您的列表是浮动的。您应该使用clearfix技术使“a”元素框包含列表。您还应该知道，按照标准，“a”元素不允许包含块元素，并且就internet explorer 9（未签入10或11）而言，“a”将无法按您预期的方式工作

可能的解决方法：











查看JavaScript中的“Chrome元素”选项卡时，由于关闭元素不匹配，生成的HTML无效

使用
var posts={“posts”：[{“id”：“1”，“title”：“lorem”，“extract”：“foo”}，{“id”：“2”，“title”：“ipsum”，“extract”：“bar”}，

这是"代码",；
$output.append（$post）；
});

---

注意：字符串连接方法，与单个

.append（）结合使用

是.

将您的

onclick

添加到包含元素的

li

或

div

中。无需使用

a

标记来进行单击处理。感谢Andyb的解释。您刚刚添加了一个我之前尝试过的示例，我知道哪里出错了。我会尽快更新此代码更正错误。根据您的建议做了一些测试，看起来都不错。谢谢。我将提出另一个关于count或if语句使用的问题，以便它显示前6篇文章，并在单击函数时，附加接下来的6篇文章

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);
    });
}

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

$.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>');
});

$.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);
});

$.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);
});