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

Question

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

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

我需要这个的原因是我正在编写一个针对 jQuery 的工具，因为我使用的是 .NET 的浏览器，所以我必须使用 Javascript 与网页的 DOM 交互。生成 .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>