jQuery 使用 .parent() 而不是 .closest() 遍历 HTML

Question

这是我的简化 HTML：

<html>
<body>
<table>
 <tr>
  <td>
   <div id="link1">
    <a href="http://example.com?this=the+one+i+want">foo</a>
   </div>
  </td>
  <td>
   <div id="link2">
    <a href="http://example.com?this=bar">bar</a>
   </div>
  </td>
  <td>
   <div id="link3">
    <a href="http://example.com?this=baz" class="baz_anchor">baz</a>
   </div>
  </td>
 </tr>
 <tr>
  <td>
   <div id="link1">
    <a href="http://example.com?this=foo">foo</a>
   </div>
  </td>
  <td>
   <div id="link2">
    <a href="http://example.com?this=bar">bar</a>
   </div>
  </td>
  <td>
   <div id="link3">
    <a href="http://example.com?this=qux" class="baz_anchor">qux</a>
   </div>
  </td>
 </tr>
</table>
<script type="text/javascript" src="http://www.upstate.edu/assets/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="demo.js"></script>
</body>
</html>

我的jQuery在下面。我正在处理包含在单独的 TD 元素中的两个锚点，它们看起来像是在同一结构级别上，但实际上并不是 DOM 兄弟节点。看来我不能将 .closest() 或 .siblings() 与此 HTML 一起使用，而是使用了 .parent() 和 .children() 链。有更好的方法吗？

link = $('a.baz_anchor:contains("baz")').parent().parent().parent().children().children('div#link1').children('a').attr('href');
alert(link);

Answer 1

这里可以走几个捷径：

链parents可以用单个closest
find 遍历所有后代层，因此单个选择器可以为所有 children

总而言之：

$('a.baz_anchor:contains("baz")').closest('tr')
                                 .find('div#link1 a')
                                 .attr('href')

顺便说一下，如果你真的通过 id 查找 div，那么其中大部分都是多余的，如 div#link1。 ID应该在页面上是唯一的，所以如果真的是这样，你只需要 $('#link1 a').attr('href')

Answer 2

这完全取决于你想做什么。

由于 ID 被设计为唯一的，您可能不需要使用任何一种方法 .closest()、.parents()、.children 等，如果您的目标是 select #link3 中的 a。这就是您所需要的：

var link = $('#link1 > a').attr('href');

console.log( $('#link1 > a').attr('href') );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
 <tr>
  <td>
   <div id="link1">
    <a href="http://example.com?this=the+one+i+want">foo</a>
   </div>
  </td>
  <td>
   <div id="link2">
    <a href="http://example.com?this=bar">bar</a>
   </div>
  </td>
  <td>
   <div id="link3">
    <a href="http://example.com?this=baz" class="baz_anchor">baz</a>
   </div>
  </td>
 </tr>
</table>

但是，如果您想要两个元素的 href 值，您可以使用以下将为您提供一个数组：

var links = $('#link1 > a, #link3 > a').map(function() {
    return $(this).attr('href');
})
.get();

var links = $('#link1 > a, #link3 > a').map(function() {
    return $(this).attr('href');
})
.get();

console.log( links );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <table>
     <tr>
      <td>
       <div id="link1">
        <a href="http://example.com?this=the+one+i+want">foo</a>
       </div>
      </td>
      <td>
       <div id="link2">
        <a href="http://example.com?this=bar">bar</a>
       </div>
      </td>
      <td>
       <div id="link3">
        <a href="http://example.com?this=baz" class="baz_anchor">baz</a>
       </div>
      </td>
     </tr>
    </table>

jQuery 使用 .parent() 而不是 .closest() 遍历 HTML

jQuery traversal of HTML using .parent() instead of .closest()

jquery

children

parent