Question

我正在尝试定位所点击项目的第n个兄弟。基本上要定位下一个第n个元素（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/

Answer 1

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

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

查看我的updated Fiddle here。

Answer 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>');
});

与'n-child'一起定位'this'的兄弟姐妹

2 个答案: