0

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

<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();
    }
});
4

5 回答 5

7

您可以使用最接近的.

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

演示

$('h2.toggle-box-title').click(function(){
   $(this).closest('li').addClass('active');
});
于 2013-05-08T01:33:01.267 回答
2

尝试这个。

$('h2.toggle-box-title').click(function(){
   $(this).parent().addClass('newclass');
});
于 2013-05-07T23:31:24.973 回答
1

尝试这个：

$('h2.toggle-box-title').click(function() {
    $(this).parent('li').addClass('active');
});
于 2013-05-08T02:35:42.433 回答
1

选择元素的父级

为了选择元素父级，您可以使用parent()函数。

尝试这个：

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

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

在此处查看 jQuery API 文档

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

于 2013-05-08T01:27:59.790 回答
1

在您单击按钮时，您可以使用该事件：

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

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

于 2013-05-08T03:03:28.707 回答