0

我正在尝试以单击项目的第 n 个同级为目标。基本上以nth(4n+4)的下一个元素为目标，之后能够插入一个新元素，有点像“新行”。

$("li").click(function () {
    $(this).next('li:nth-child(4n+4)').after('<li class="full">new full width item</li>');
});

似乎不起作用的是 .next('li:nth-child(4n+4)') 。

这有点难以解释，但你会明白我在这里的意思：http: //jsfiddle.net/hYE7e/1/

4

2 回答 2

2

我想你想过滤所有即将到来的兄弟姐妹，而不仅仅是下一个，对吧？也许这就是你想要的：

$(this).nextAll('li:nth-child(4n+4)').first().after('<li class="full">new full width item</li>');

在这里查看我更新的小提琴。

于 2013-06-29T13:34:27.157 回答
2

这实际上工作正常，但after()只会在下一个li是 4n+4 孩子时执行。即从一开始，如果您单击 3或7，它将正常工作。在您单击 3 之后，第 7 个将停止工作，而第 6 个将改为工作，因为 7 现在已成为第 8 个元素。

有点笨拙的更新：http: //jsfiddle.net/hYE7e/3/

$("ul li:nth-child(4n)").addClass("last-in-line");
$("li").click(function () {
    $(this).nextAll("li.last-in-line").andSelf(".last-in-line").filter(":first").after('<li class="full">new full width item</li>');
});

andSelf(".last-in-line").filter(":first")以确保单击第 4、第 8 等元素将起作用。

更新：

在评论中讨论后，我想我有它：http: //jsfiddle.net/hYE7e/7/

使用自定义过滤器：

$("li").click(function () {
    var myIndex = $("li:not(.full)").index($(this)); // Save our position in a row
    $(this)
      .nextAll("li:not(.full)")
      .andSelf()
      .filter(function(index){  // Get 4n'th lis from 'not(.full)' set
          return (index + myIndex + 1) % 4 == 0;  
      })
      .add("li:last")  // Make sure last rows will work
      .first()         // Only add 'li' after first matching element
      .after('<li class="full">new full width item</li>');
});
于 2013-06-29T13:34:27.733 回答