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位）。

结果：

的 注：的

我知道或者我可以使用，nth-child（）或nth-of-type（），nth-last（），或者 nth-last-child（），或：odd（），或：even（）;或：nextAll（）或：prevAll（），但我想知道，为什么这不起作用！ ;（。

有人可以帮我解决问题吗？

Answer 1

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

<script> function showhide(id){ if (document.getElementById){ obj = document.getElementById(id); if (obj.style.display == "none"){ obj.style.display = ""; } else { obj.style.display = "none"; } } } var onImg= "testim.png, valm.png"; var offImg= "testip.png, valp.png"; </script>与第二个<div style="margin-top: 10px; text-align: center;"> <ul id="text_type_tab" name="text_type_tab"> <li id="PR_TEXT_TAB" class="tab_active"> <a href="javascript:showhide('textInputField1');"><img src="testim.png" onclick="this.src = (this.src.endsWith(offImg)? onImg : offImg);" align="middle"/></li></a> </ul> </div> <table id="hidden_content" width="80%" align="center" style="margin-bottom: 10px; margin-left: 10px; margin-right: 10px"> <tr> <td colspan="2"> <textarea id="textInputField1" name="textInputField1" style="resize:vertical; width: 900px;" rows="15" cols="105" wrap="pre" onblur="onTextSubmitFunction('Apply')"></textarea> </td> </tr> </table>匹配。只有一个这样的元素，因为根据定义，div p:eq(1)一次只匹配一个元素（如果没有匹配则没有）。不能超过一个。

div p匹配前两个:eq()元素。由于您特别要求前两个元素，因此最多只能有两个这样的元素。

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

¹ _{但我不会责怪你 - 语法会使这些选择器very confusing in terms of their functionality完全出于这个原因而完全避免使用它们。} < / p>

Answer 2

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

如果你想要每个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是一个工作样本

Answer 3

你可以在jquery上使用nth-child（），它来自css选择器：

选择所有父元素的第n个子元素。（..）n的值是“1索引”，意味着计数从1开始。对于其他选择器表达式，例如：eq（）或：甚至jQuery遵循JavaScript的“0索引”计数。如果一个<ul>包含两个<li>，则$( "li:nth-child(1)" )会选择第一个<li>而$( "li:eq(1)" )会选择第二个/usr/lib/node_modules。

详情请见：http://api.jquery.com/nth-child-selector/

jQuery：eq（），：lt（）和：gt（）函数不提供预期的结果

3 个答案: