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

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将匹配与遍历DOM树的选择器匹配的第一个父元素。

演示版

$('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文档

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/