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

Question

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

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

我需要这个的原因是我正在编写一个针对 jQuery 的工具，因为我使用的是 .NET 的浏览器，所以我必须使用 Javascript 来与网页的 DOM 交互。 Generate .parent() 方法会使代码生成更加复杂。所以我试图让它尽可能短，生成选择器尽可能地完成所有工作。 所以不用担心它是否会不可读，反正它不会被任何人阅读。

Answer 1

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

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

然后使用：

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

$.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');

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

Answer 2

在 jQuery 中使用 closest() 表示父级

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

你也可以用like

$('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");

$('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");

<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>

Answer 3

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

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

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