Question

我正在尝试使用以下html中的jQuery来查找元素。

<ul class="gdl-toggle-box">
   <li class="">
      <h2 class="toggle-box-title"><span class="toggle-box-icon"></span>Volunteer Form</h2>
      <div class="toggle-box-content" style="">
      </div>
   </li>
</ul>

我要做的是当点击h2时，发现h2上方的li添加了一个活动的类。尝试了几个不同的电话，但没有运气。的修改

最大的问题是页面上有多个切换框，所以这样的东西适用于带有单个切换的页面，但结果多的页面都是一起打开的。

var gdl_toggle_box = jQuery('ul.gdl-toggle-box');
gdl_toggle_box.find('li').each(function(){
    jQuery(this).addClass('item');
});
gdl_toggle_box.find('li').not('.active').each(function(){
    jQuery(this).children('.toggle-box-content').css('display', 'none');
});
gdl_toggle_box.find('h2').click(function(){
    if( jQuery('.item').hasClass('active') ){
         jQuery('.item').removeClass('active').children('.toggle-box-content').slideUp();
    }else{
         jQuery('.item').addClass('active').children('.toggle-box-content').slideDown();
    }
});

Answer 1

您可以使用closest。

closest将匹配与遍历DOM树的选择器匹配的第一个父元素。

Demo

$('h2.toggle-box-title').click(function(){
   $(this).closest('li').addClass('active');
});

Answer 2

试试这个。

$('h2.toggle-box-title').click(function(){
   $(this).parent().addClass('newclass');
});

Answer 3

选择元素的父级

要选择父元素，您可以使用 parent（）函数。

试试这个：

$('h2.toggle-box-title').click(function() {
    $(this).parent('li').addClass('active');
});

* 更具体一点，您可以通过指定其选择器来定位您想要选择的父级

检查jQuery API文档here

parent（） - 获取当前匹配元素集中每个元素的父元素，可选择由选择器过滤。

Answer 4

试试这个：

$('h2.toggle-box-title').click(function() {
    $(this).parent('li').addClass('active');
});

Answer 5

点击按钮，您可以使用该事件：

$("something").parent().find("h2.myClass");
// And if you want you can add class after you find you object

http://api.jquery.com/find/

使用jQuery在另一个上面查找元素

5 个答案: