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>

我想在点击“hi”div时将新类添加到最后一个dd元素。我可以使用jquery实现。

Answer 1

您可以使用closest()获取相关的dd祖先，然后定位到最后dl：

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

Answer 2

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

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

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

Answer 3

你好:)你可以使用parent（）或parent（） - documentation for parents()。

所以，试试这个：

$('.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');
});

你可以view online here in jsfiddle。

Answer 4

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

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

Answer 5

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

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

这是DOM树遍历的jQuery API documentation category - 有不止一种方法可以做到。

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

5 个答案: