Question

我正在使用rails和jquery。按下按钮，我将返回部分结果。

$(".blog-posts ul").append("<%= j render('blog/posts')%>").hide().fadeIn(400);

结果是：

"<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>"

正如你所看到它返回一个字符串，但我想要做的是将每个li元素作为html抓取并将其附加到ul，但似乎无法使其正常工作。

我尝试了很多东西，类似于这个

 $('li', $("<%= j render('blog/posts')%>")).each(function(i) {
     $(this).appendTo('.blog-posts ul');
 });

但它并没有附加它们。我试图延迟追加每一个李。

我甚至尝试过：

 $('li', $("<%= j render('blog/posts')%>")).each(function(i) {
   $(this).delay((i++) * 500).appendTo('.blog-posts ul').fadeTo(1000, 1);
 });

Answer 1

由于html字符串的顶级为<li>，您可以使用filter()获取每个字符串，或将<li>包裹在<ul>中使用find()或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);
});

循环遍历HTML元素字符串并使用jquery插入

1 个答案: