忽略:http://jsfiddle.net/gulcoza/9cVFT/1/
更新的 fiddle : http://jsfiddle.net/gulcoza/9cVFT/4/
整个代码在上面的 fiddle 里,但我也会在这里解释一下:
HTML
<ul>
<li id="e1">1</li>
<li id="e2" class="hidden">2</li>
<li id="e3">3</li>
<li id="e4" class="hidden">4</li>
<li id="e5">5</li>
<li id="e6">6</li>
<li id="e7">7</li>
<li id="e8">8</li>
<li id="e9">9</li>
<li id="e10">10</li>
</ul>
jQuery
console.log(
$('ul li:visible:nth-child(4n)')
);
我的预期结果: li#e6, li#e10
- 为什么?因为我只想要可见元素中的 4n 个元素。
但是
实际结果:只有当它们可见时,我才从所有元素中获取 4n 元素。
console.log(
$('ul li:visible').filter(function(index) {
if ((index + 1) % 4 ==0) return true;
})
);
我对比以下更好的解决方案感兴趣:
console.log(
$('ul li:visible').filter(function(index) {
if ((index + 1) % 4 ==0) return true;
})
);
更新的 fiddle :
http://jsfiddle.net/gulcoza/9cVFT/4/
为什么数字 4 不起作用。目前过滤器被调用,结果应该已经被过滤了,恕我直言。 :|
// 4 - could be a nice solution
console.log(
$('ul li:visible').filter(':nth-child(4n)')
);
为什么这行不通?在 $('ul li:visible')
时刻只有可见的可用。
最佳答案
那是因为 nth-child
根据元素在父元素的子元素列表中的位置匹配元素,而不是根据 jQuery 集合(选定元素),在此你必须使用 filter
方法,filter
方法也比链式字符串选择器更快。
这就是选择器过滤元素的方式:
$('ul li:nth-child(4n):visible')
// ^ ^---- [li#e8]
// |
// | --- [li#e4.hidden, li#e8]
$('ul li:visible:nth-child(4n)')
// ^ ^---- [li#e8]
// |
// | --- [li#e1, li#e3, li#e5, li#e6, li#e7, li#e8, li#e9, li#e10]
// [1, 3, 5, 6, 7, 8, 9, 10]
关于javascript - jQuery 中的链式选择器 : apply selector in already filtered results,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16837034/