Eric Wang Eric Wang - 5 months ago 33
jQuery Question

Nested .each jquery append to class

I have a nested .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> ');
});
});


On the second .each append, it's appending to every instance of "tags" class created in the first .each loop in the page. How do i just let it append to the div i just appended in the first .each?

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


Update This is the final solution, so i guess foreach post in posts, its setting a new variable "var post" and everytime you append now, you only append to this instance of the variable instead of all. thanks all

$.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

First, to answer your question, you can create a Jquery element and add the buttons to it before you even append it to your 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);
});

Just mentioning, that it's more performant-wise to create all the nodes and append them together, and not once for every loop iteration.

Comments