根据 nth,mth,oth,..., 模式选择孩子？答案

【问题标题】：Select children based on nth,mth,oth,..., pattern?根据 nth,mth,oth,..., 模式选择孩子？
【发布时间】：2014-11-21 21:29:07
【问题描述】：

给定一个具有许多 div 子级的 div，以及一个运行时派生编号 ChildrenPerRow，我如何选择每个“虚拟”行中不是该虚拟行上最后一个元素的所有子级？

例如，如果ChildrenPerRow = 5，则选择器应返回第1、2、3、4、6、7、8、9、11、12、13、14等。如果ChildrenPerRow = 4，选择器应返回返回第 1、2、3、5、6、7、9、10、11、13、14、15 等。

我尝试过使用类似的东西：

var FilterStr = '';
for(var i=1; i<ChildrenPerRow;i++){
   FilterStr+=':nth-child('+i+'n),';
}
FilterStr = FilterStr.replace(/(^,)|(,$)/g, "");
$Children.filter(FilterStr).doSomething();

这会产生一个像这样的选择器：

:nth-child(1n),:nth-child(2n),:nth-child(3n),:nth-child(4n)

但这会选择每个孩子。我也觉得使用外观构建选择器字符串效率低下。我认为这可以使用非选择器来完成，但我也想知道如何使用正选择器来完成。

所以问题是，什么是实现此目的的有效方法？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

这是你要找的吗？

$Children.filter(':not(:nth-child(' + ChildrenPerRow + 'n))');

如果没有 :not() 选择器，您将不得不像这样构建一个选择器：

$Children.filter(':nth-child(5n+1), :nth-child(5n+2), :nth-child(5n+3), :nth-child(5n+4)')

【讨论】：

我想就这些了，等我回来看看。

【解决方案2】：

如果我理解正确

 $("div div").not(":last-child");

应该够了，

对于 10 个子 div

<div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
</div>
<div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
</div>

它将返回 8，省略每个父 div 的最后一个孩子

演示小提琴 http://jsfiddle.net/1yg3z86p/1/

【讨论】：

这些行没有包含在 div 中，它们是“虚拟”行，因此它是一个包含许多直接子 div 的容器 div。每行的项目根据父容器的宽度而变化。
好的，在这种情况下，投票给 Dave，charlietfl 也可以，虽然它应该是 !== ChildrenPerRow - 1 排除最后一个元素

【解决方案3】：

可以使用filter(fn) 的index 参数使内容更具可读性

$('.parentClass .childClass').filter(function(index){
   return index % (ChildrenPerRow-1) !==0;
}).doSomething();

【讨论】：