使用 jQuery 从子节点定位父节点

Question

我有以下结构。

<dl>
    <dt class="tab">..</dt>
    <dd class="tab-container">..</dd>
    <dt class="tab">
         <div class="hi">hello</div>
    </dt>
    <dd class="tab-container">...</dd>
    <dt class="tab">...</dt>
    <dd class="tab-container">...</dd>
</dl>

我想在单击"嗨"div 时向最后一个 dd 元素添加新类.如何使用 jquery 实现。

Answer 1

您可以使用 closest（） 获取相关的dd祖先，然后针对最后dl：

$('div.hi').on('click', function(){
  $(this).closest('dl').children('dd:last-child').addClass('myNewClass');
});

Answer 2

尝试学习遍历。 回答您的问题[在评论中提出]

$(this).parents('dl').prev().closest('ul').children('li').eq(-2).addClass('new classs');

Answer 3

听起来你想要这样的东西：

$(".hi").click(function () {
    $(this).closest("dl").find("dd:last-child").addClass("blue");
});

示例：https://jsfiddle.net/z24toqL2/

Answer 4

你好:)您可以使用 parent（） 或 parents（） - parent（） 的文档。

所以，试试这个：

$('.hi').on('click', function() {
   // In that case- parents('dl') - try to catch a dl parent
   $(this).parents('dl').find('dd:last-of-type').addClass('new-class');
});

您可以在jsfiddle中在线查看。

Answer 5

一种方法是使用 jQuery.parents 遍历 DOM 树，直到找到 dl 元素。

$('.hi').on('click', function() {
  $(this).parents('dl').find('dd:last').addClass('my-new-class');
});

这是 DOM 树遍历的 jQuery API 文档类别 - 有多种方法可以做到这一点。