获取变量的第n个孩子充满li标签

Question

我有一个变量，我们称它为$ listObjects。作为跟随它的数据....

<li>Data Here 1</li> 
<li>Data Here 2</li> 
<li>Data Here 3</li> 
<li>Data Here 4</li> 

我都想尽办法，我能想到的，并不能找出如何获取列表标签的第n个孩子。这可能吗？我基本上想在$ listObjects变量上使用nth-child（3n）。

如果上述方法是不可能的，$ listObjects变量被填充，像这样......

var $listObjects = $data.find('li[data-type=' + $filterType + ']'); 

有没有可能到第n个孩子（3N）添加到该行？

Answer 1

使用filter：

减少匹配的元素的那些选择器匹配或传递函数的测试。

所以这应该这样做：

$listObjects.filter(':nth-child(3n)') 

如果你没有在需要$listObjects为别的，那么你可以包括:nth-child你原来find：

$data.find('li[data-type=' + $filterType + ']:nth-child(3n)'); 

---

让我们澄清一下发生了什么。鉴于这种HTML：

<ul> 
    <li data-id="a">One</li> 
    <li>Two</li> 
    <li data-id="a">Three</li> 
    <li data-id="a">Four</li> 
    <li data-id="a">Five</li> 
    <li data-id="a">Six</li> 
    <li data-id="a">Seven</li> 
</ul> 

如果说$('li[data-id]')我们会得到一个，三，四，五，六和七明显的原因。

如果说$('li[data-id]').filter(':nth-child(3n)')，我们会得到三和六时，你可能期望得到四和七。这里发生了什么？ :nth-child选择器正在应用于<ul>的所有孩子，而不仅仅是那些匹配[data-id]的孩子。从精细手册：

提供的选择器针对每个元素进行测试;与选择器匹配的所有元素都将包含在结果中。

所以这个行为与规范相匹配，即使它有点混淆，规范可能会更明确地表明事物如何相互作用。

如果说$('li[data-id]:nth-child(3n)')那么我们得到的（预期？）四和七的$('li[data-id]')即每三个要素。

最后，我们可以这样说：

$.grep($('li[data-id]'), function(e, i) { return (i + 1) % 3 == 0 })); 

记住nth-child是一个CSS选择器，因此1型，因此(i + 1)的测试功能。这将再次给我们每一个第三个元素，所以我们得到四个和七个。请注意，$.grep为您提供了一个简单的DOM元素数组，因此如果您使用jQuery-ified版本，那么您需要将该数组包装在$()中。

演示：http://jsfiddle.net/fw4xr/

---

摘要：filter可能不是你想要什么，但加入:nth-child(3n)原来的选择可能是。或者，您可以使用$.grep来获取您感兴趣的$listObjects阵列的一部分。而filter的行为有点令人困惑。