jQuery - 遍历父级元素并查找指定类的元素

Question

我曾以为closest()函数可以帮我实现这个功能，但结果好像并不是这样。以下是我的标记代码，我想给所有带有trigger类的父级锚点添加class属性：

    <ul>
    <li class="selected">
      <a class="trigger" href=""></a> 
      <a href=""></a>
      <ul>
        <li class="selected">
          <a class="trigger" href=""></a> 
          <a href="" id = "my_target"></a>
        </li>
      </ul>
    </li>
  </ul>

我希望选择我的目标 - 在这个例子中，是最深的锚点，然后为其祖先中的每个a.trigger添加一个class。最好的方法是什么？谢谢。

- scotto

Answer 1

这里有一个示例，使用jQuery.parents()（获取包含的<li>标签），然后再使用jQuery.children()获取带有trigger类的<a>标签。

$(document).ready( function() {
    $('#my_target').click( function(e) {
        $(this).parents('li.selected').children('a.trigger').addClass('myclass');
        e.preventDefault();
    });
});

jsfiddle示例

编辑：

注意$().parents()会一直向上遍历整个树，但$().children()只会遍历下一级。要获取元素的所有后代，请使用$().find()。

- Mark Biek

---

一旦jsfiddle恢复在线，我会添加一个示例 :) - Mark Biek

不知道jsbin，谢谢！虽然不如jsfiddle干净，但在紧急情况下可以使用。 - Mark Biek

@MarkBiek - parents() 似乎遍历整个 DOM 树并获取所有项目，但当我到达顶部项目并尝试向下遍历并收集树中的所有链接 .children('a') 时，它似乎找不到任何内容。难道 children 不会向下遍历树吗？ - one.beat.consumer

忘了吧...我在jQuery网站的细则中找到了答案。 - one.beat.consumer

Answer 2

你想使用。

$('#my_target').parents('a.trigger');

使用.parents方法（它遍历整个DOM树，而不是.parent只遍历一级）。

- Alex

Answer 3

parents 用于向上遍历。

我相信这应该可以工作：

$('#my_target').parents('.trigger').addClass('myclass');

然而，对于兄弟节点，您需要使用siblings而不是parents。例如，与#my_target锚点一起的anchor标记被视为兄弟节点。

- dennmat