Question

给出以下标记：

<dl>
    <dt>What are your hours?</dt>
    <dd class="first">We are open 24/7.</dd>
    <dt>What are your hours?</dt>
    <dd class="second">We are open 24/7.</dd>
    <dt>What are your hours?</dt>
    <dd class="third">We are open 24/7.</dd>
    <dt>What are your hours?</dt>
    <dd class="fourth">We are open 24/7.</dd>
    <dt>What are your hours?</dt>
    <dd class="fifth">We are open 24/7.</dd>
</dl>

console.log($('dd').get());  
//returns - [dd.first, dd.second, dd.third, dd.fourth, dd.fifth]

使用此选择器添加“隐藏”类$('dd').filter(':nth-child(n+4)').addClass('hide');将类应用于第二，第三，第四和第五。它应该不适用于第四和第五类吗？好像$（'dd'）选择器在计数中包含了dt元素。为什么会这样呢？

<dl>
    <dt>What are your hours?</dt>
    <dd class="first">We are open 24/7.</dd>
    <dt>What are your hours?</dt>
    <dd class="second hide">We are open 24/7.</dd>
    <dt>What are your hours?</dt>
    <dd class="third hide">We are open 24/7.</dd>
    <dt>What are your hours?</dt>
    <dd class="fourth hide">We are open 24/7.</dd>
    <dt>What are your hours?</dt>
    <dd class="fifth hide">We are open 24/7.</dd>
</dl>

Answer 1

不，nth-selector将只搜索子计数，其他过滤器不会应用于它 - 您的选择器将获取索引大于3的所有dd个元素

您可以尝试使用slice（）

$('dd').slice(3).addClass('hide');

演示：Fiddle

Answer 2

试试这个。

$('dd').slice(3).addClass('hide');

工作演示：http://jsfiddle.net/Fm345/

jQuery过滤nth-child（n + x）未返回预期结果

2 个答案: