pjax - Loop through HTML elements string and insert with jquery -
i using rails , jquery. on button hit i'm returning results partial.
$(".blog-posts ul").append("<%= j render('blog/posts')%>").hide().fadein(400);
the results are:
"<li class=\"post item\"><div class=\"overlay\"><h5><a href=\"/blog/post-slug\">post title<\/a><\/h5><\/div><\/li> <li class=\"post item\"><div class=\"overlay\"><h5><a href=\"/blog/post-slug\">post title<\/a><\/h5><\/div><\/li> <li class=\"post item\"><div class=\"overlay\"><h5><a href=\"/blog/post-slug\">post title<\/a><\/h5><\/div><\/li>"
as can see returns string trying grab every li element html , append ul can't seem working.
i've tried multitude of things, similar this
$('li', $("<%= j render('blog/posts')%>")).each(function(i) { $(this).appendto('.blog-posts ul'); });
but doesn't append them. i'm trying append each li delay.
i've tried:
$('li', $("<%= j render('blog/posts')%>")).each(function(i) { $(this).delay((i++) * 500).appendto('.blog-posts ul').fadeto(1000, 1); });
since top level of html string <li>
can use filter()
each or wrap new <li>
's in <ul>
access them using find()
or children()
var $newlist=$("<ul>").html("<%= j render('blog/posts')%>"), delay=500, $list=$('.blog-posts ul'); $newlist.children().each(function(i, elem){ settimeout(function(){ $list.append(elem); }, delay*i); });
Comments
Post a Comment