Question

如何仅使用jQuery选择器返回特定索引处的父元素？通过使用:eq()管理的索引来获取，但:parent似乎无法正常工作。它返回相同的元素，无论我有多少:parent。我试过这个：

div.unread span.text:eq(2):parent

我需要这个的原因是我正在编写一个以jQuery为目标的工具，因为我使用的是.NET的浏览器，我必须使用Javascript与之交互网页的DOM。生成.parent()方法会使代码生成更复杂一些。因此，我试图尽可能缩短它，生成选择器尽可能地完成所有工作。所以不要担心它是否会变得难以理解，无论如何都不会被任何人阅读。

Answer 1

如果您需要元素索引全局工作，您可以扩展jQuery表达式以使用您自己的表达式：

ship

然后使用：

$.extend($.expr[':'],{
    parentOf: function(elm, _, a) {
        return $(elm).find($(a[3])).length
    }
});

＆＃13;

$('div.unread:parentOf(span.text:eq(2))')

＆＃13;

$.extend($.expr[':'],{
    parentOf: function(elm, _, a) {
        return $(elm).find($(a[3])).length
    }
});


$('div.unread:parentOf(span.text:eq(2))').css('color', 'red');
$('span.text:eq(2)').css('color', 'green');

＆＃13;

Answer 2

您可以使用:has选择器根据其子项检索父级：

$('div.unread:has(span.text:eq(2))');

请注意，如@ A.Wolff所述，此实例中的:eq()选择器在每个单独的div.unread元素的上下文中工作，而不是全局，如果这是您的原始意图。

Answer 3

使用closest()表示jQuery中的parent

$('span.text:eq(2)').closest('div.unread');

您也可以使用

$('span.text:eq(2)').closest('div.unread').css("background","red");

$('span.text').eq(2).closest('div.unread').css("background","green");

$('span.text:nth-child(2)').closest('div.unread').css("background","blue");


$('span.text:nth-child(3)').parents('div.unread').css("background","orange");
//:nth-child(3) denotes 3rd element unlike eq(3) refers 4th element

$('span.text:nth-child(3)').parent().css("background","yellow");

＆＃13;

$('span.text:eq(2)').closest('div.unread').css("background","red");

$('span.text').eq(2).closest('div.unread').css("background","green");

$('span.text:nth-child(2)').closest('div.unread').css("background","blue");


$('span.text:nth-child(3)').parents('div.unread').css("background","orange");

$('span.text:nth-child(3)').parent().css("background","yellow");

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="unread">
  <span class="text">text1</span>
  <span class="text">text2</span>
  <span class="text">text3</span>
</div>

＆＃13;

如何使用选择器返回父级？

3 个答案: