jQuery :eq()、:lt() 和 :gt() 函数未提供预期结果

Question

我正在使用 eq() 的 jQuery 功能，但它没有提供正确的结果

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("div p:eq(1)").css("border","2px solid red");

    });
});
</script> 
</head>
<body>
    <button>Click Me!</button>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <div>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
    </div> 
    <div>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
    </div> 
</body>
</html>

期望值：

我预计有 2 行是红色的（第 5 行和第 8 行）。

结果：

此外，当我使用 lt() 时，我得到了错误的结果。

HTML:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("div p:lt(2)").css("border","2px solid red");

    });
});
</script> 
</head>
<body>
    <button>Click Me!</button>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <div>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
    </div> 
    <div>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
    </div> 
</body>
</html>

期望：

我预计有 4 行是红色的（第 6、7、11 和 12）。

结果：

注意：

I know that alternatively I can use, nth-child() , or nth-of-type(), nth-last(), or nth-last-child(), or :odd(), or :even(); or :nextAll() or :prevAll(), but I want to know, why is this not working! ;( .

谁能帮我看看问题出在哪里？

Answer 1

您可以在 jquery 上使用 nth-child() ，它派生自 css 选择器：

Selects all elements that are the nth-child of their parent. (..) the value of n is "1-indexed", meaning that the counting starts at 1. For other selector expressions such as :eq() or :even jQuery follows JavaScript's "0-indexed" counting. Given a single <ul> containing two <li>s, $( "li:nth-child(1)" ) selects the first <li> while $( "li:eq(1)" ) selects the second.

查看更多信息：http://api.jquery.com/nth-child-selector/

Answer 2

结果正确。因此，问题似乎出在您对这些选择器如何工作的期望中，因为您声明结果是错误的，而实际上它们是正确的。¹

div p:eq(1) 匹配第二个 div p。只能有一个这样的元素，因为根据定义 :eq() 一次只匹配一个元素（或者 none 如果没有匹配项）。不能超过一个。

div p:lt(2) 匹配前两个 div p 元素。这些元素中最多只能有两个，因为您专门要求其中的前两个。

如果您要在每个 div 中寻找第二个 p ，那么您需要 .each() div 元素并分别执行 .find('p:eq(1)') 和 .find('p:lt(2)')。或者分别使用 div p:nth-child(2) 和 div p:nth-child(-n+2) 并放弃非标准 jQuery 选择器和循环。

¹ _{但我不怪你——语法使这些选择器 very confusing in terms of their functionality 而我只是因为这个原因完全避免使用它们。}

Answer 3

jQuery 选择器表达式 "div p" 将为您提供 2 div 内的所有 6 个 p 标签。并且您将 eq(1) 应用到这 6 个项目之上，这将只给您一个项目。

如果你想要每个 div 中的第一个项目，你可以试试这个

var items=$("div");
$.each(items,function(a,b)
{
    $(b).find("p").eq(1).css("border","2px solid red"); 
});

在每个循环中，当你执行 $(b).find("p") 时，它会给你 3 个 p 标签，最重要的是当你运行 eq(1), 每次都会给出正确的项目。

Here 是工作样本

jQuery :eq()、:lt() 和 :gt() 函数未提供预期结果

jQuery :eq(), :lt(), and :gt() functions not providing expected results

javascript

jquery

jquery-selectors