Question

我有一个嵌套的.each

$.each(result.postsViewModel.Posts, function(index, item) {
    $('#postList').append('<div class="col-lg-4 postItem"><div class="ibox"><div class="ibox-content contact-box">' + (item.IsPublic == true ? '<span class="label label-primary pull-right">Public</span>' : '<span class="label label-warning pull-right">Private</span>') + '<a href="@Url.Action("Article", "AppViews")" title="' + item.Title + '" class="btn-link"><h2><span class="postId">' + item.PostId + '</span>. ' + item.Title + '</h2></a><div class="small m-b-xs"><strong>' + item.Category.Name + '</strong> <div class="text-muted"><i class="fa fa-clock-o"></i> ' + new Date(parseInt(item.PostedOn.substr(6))) + '</div></div><p>' + $.trim(item.Description.replace(regex, "")).substring(0, 200).trim(this) + '...' + '</p><div class="row"><div class="col-md-6 tags"><h5>Tags:</h5></div><div class="col-md-6"><div class="small text-right"><h5>Stats:</h5><div><i class="fa fa-comments-o"> </i> 56 comments</div><i class="fa fa-eye"> </i> 144 views</div></div></div><div class="contact-box-custom-footer"><div class="m-t-xs btn-group"><a class="btn btn-xs btn-white deletePostBtn"><i class="fa fa-trash"></i> Remove </a></div></div></div></div></div>');

    $.each(item.Tags, function(index, tag) {
        $('.tags').append('<button class="btn btn-white btn-xs" type="button">' + tag.Name + '</button> ');
    });
});

在第二个.each追加，它附加到＆＃34;标签的每个实例＆＃34;在页面的第一个.each循环中创建的类</ strong>。我如何让它附加到我刚刚附加在第一个.each中的div？

<div class="col-md-6 tags">

更新这是最终的解决方案，所以我想帖子中的foreach帖子，它设置了一个新变量＆＃34; var post＆＃34;并且每次你现在追加时，你只会附加到变量的这个实例而不是全部。谢谢所有

$.each(result.postsViewModel.Posts, function(index, item) { var post = $('<div class="col-lg-4 postItem"><div class="ibox"><div class="ibox-content contact-box">' + (item.IsPublic == true ? '<span class="label label-primary pull-right">Public</span>' : '<span class="label label-warning pull-right">Private</span>') + '<a href="@Url.Action("Article", "AppViews")" title="' + item.Title + '" class="btn-link"><h2><span class="postId">' + item.PostId + '</span>. ' + item.Title + '</h2></a><div class="small m-b-xs"><strong>' + item.Category.Name + '</strong> <div class="text-muted"><i class="fa fa-clock-o"></i> ' + new Date(parseInt(item.PostedOn.substr(6))) + '</div></div><p>' + $.trim(item.Description.replace(regex, "")).substring(0, 200).trim(this) + '...' + '</p><div class="row"><div class="col-md-6 tags"><h5>Tags:</h5></div><div class="col-md-6"><div class="small text-right"><h5>Stats:</h5><div><i class="fa fa-comments-o"> </i> 56 comments</div><i class="fa fa-eye"> </i> 144 views</div></div></div><div class="contact-box-custom-footer"><div class="m-t-xs btn-group"><a class="btn btn-xs btn-white deletePostBtn"><i class="fa fa-trash"></i> Remove </a></div></div></div></div></div>'); $.each(item.Tags, function (index, tag) { post.find('.tags').append('<button class="btn btn-white btn-xs" type="button">' + tag.Name + '</button> '); }); $('#postList').append(post); });

Answer 1

首先，要回答您的问题，您可以创建一个Jquery元素并在将它添加到DOM之前添加按钮：

$.each(result.postsViewModel.Posts, function (index, item) {
    var $el = $('<div>Your content</div>');

    $.each(item.Tags, function (index, tag) {
         $el.find('.tags').append('<button class="btn btn-white btn-xs" type="button">' + tag.Name + '</button> ');
    });

    $('#postList').append($el);
});

简单地说，创建所有节点并将它们附加在一起是更高效的，而不是每次循环迭代一次。

嵌套的.each jquery附加到类

1 个答案: