javascript - 这会找到另一个 div 的父级并使用 jQuery 切换其子级

Question

我做了一些研究，但似乎没有任何效果。这是 HTML，后面是我整理的 JavaScript。我要做的是设置它，以便每当单击dashboard_gear_options 时，它都会切换适当的隐藏选项行。每个代码块在页面上的不同位置多次存在。我尝试使用它，find，parent，next 和 children 无济于事。

HTML：

// start block
<div class="content_block_holder">
   <div class="content_top">
      <div class="dashboard_gear_options"></div>
      <div class="dashboard_gear_divider"></div>
   </div>
   <div class="dashboard_holder">
      <div class="hidden_options_row"></div>
   </div>
</div>
// end block

// start block
<div class="content_block_holder">
   <div class="content_top">
      <div class="dashboard_gear_options"></div>
      <div class="dashboard_gear_divider"></div>
   </div>
   <div class="dashboard_holder">
      <div class="hidden_options_row"></div>
   </div>
</div>
// end block (etc..)

JS：

$(document).ready(function(){
   $('.dashboard_gear_options').click(function(){
       $(this).parent('.content_block_holder').find('.hidden_options_row').toggle();        
    });
});

Answer 1

尝试在选择器中使用closest([selector])( http://api.jquery.com/closest/ ) 而不是 parent。它将遍历树并找到“content_block_holder”。parent([selector])如果它与提供的选择器不匹配，将只检查直接父级并返回一个空集。

$(document).ready(function(){
   $('.dashboard_gear_options').click(function(){
       $(this).closest('.content_block_holder').find('.hidden_options_row').toggle();        
   });
});

基于您的代码的 JSFiddle：http: //jsfiddle.net/gK7yM/

Answer 2

试试这个

$(this).closest('.content_block_holder').find('.dashboard_holder').find('.hidden_options_row').toggle();        

Answer 3

这条链也有效：

$(this).parent().next('.dashboard_holder').children('.hidden_options_row').toggle();

或者

$(this).parent().next('.dashboard_holder').find('.hidden_options_row').toggle();