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

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 元素标签，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>的第一个孩子破碎：

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

根据您要在anchor元素中准确包装的内容，您可以像在this updated demo中一样构建帖子<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>');
});

或者，如果您想减少字符串连接，可以使用.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。

Answer 2

从外观上看，你的名单是浮动的。您应该使用clearfix技术使“A”元素框包含列表。您还应该知道，标准“A”元素不允许包含块元素，并且对于Internet Explorer 9（没有在10或11中检入），“A”将无法按照您的预期工作。

可能的解决方法：
    <div style="position:relative">
<ul>
<li></li>
<ul>
<a style="position:absolute;display:block;top:0;bottom:0;left:0:right:0;" href="#"></a>
<div>