javascript - 选择器获取元素的直接父元素

Question

我需要为共享点 Web 部件编写自定义 JS。因此，我需要找到每个 TableRow 都有一个包含指向 PDF 文件的超链接的子项。

到目前为止，我使用了以下选择器:

$('tr:has("a[href$="pdf"]")')

主要问题是所述超链接的父级嵌套在多个表行中。

我无法更改此布局。

基本上是:

<tr>
  <tr>
    <tr>
      <a href=".pdf" />
    </tr>
  </tr>
</tr>

我只想找到超链接的直接父级。我该怎么做呢？我不想使用:

 $('a[href$="pdf"]').parent()

Answer 1

如果您知道嵌套层数总是 3，请使用:

$('tr tr tr:has(a[href$=pdf])')

否则，这将起作用:

$('tr:has(a[href$=pdf]):not(:has(tr))')

这是一个片段(为简洁起见，我使用了 <div> 而不是 <tr>):

var selected = $("div:has(a[href$=pdf]):not(:has(div))");
selected.addClass('selected');

div {
    border: 2px solid gray;
    padding: 6px;
}

.selected {
    border-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
    <div>
        <div>
            <a href="http://example.com/foo.pdf">foo.pdf</a>
        </div>
    </div>
</div>

...但坦率地说$('a[href$=pdf]').closest('tr')可能性能更高。