遍历到最接近元素点击的元素jquery答案

【问题标题】：Traversing to the element closest to the element clicked jquery遍历到最接近元素点击的元素jquery
【发布时间】：2013-06-28 13:41:40
【问题描述】：

我的 html 中有这种设置

<section class="grp">
  <ul class="normal">
    <li>Normal Thing <button class="toggle-advanced">toggle advanced</button></li>
  </ul>
  <ul class="advanced">
    <li>This is Advanced</li>
  </ul>
</section>
<h1>Another Thing</h1>
<section class="grp">
  <ul class="normal">
    <li>Normal Thing <button class="toggle-advanced">toggle advanced</button></li>
  </ul>
  <ul class="advanced">
    <li>This is Advanced</li>
  </ul>
</section>

如果我点击ul.normal 中的按钮，如何切换“高级”ul？

我在coffeescript中这样尝试过

$('.normal').on 'click', '.toggle-advanced', (e) ->
  $(@).closest('.grp').siblings('.advanced').slideToggle();

【问题讨论】：

标签： javascript jquery html coffeescript traversal

【解决方案1】：

因为 jquery 被标记...使用 jquery

$('.toggle-advanced').click(function(){
    $(this).parents('ul.normal').siblings('ul.advanced').toggle();
});

或

$('.toggle-advanced').click(function(){
    $(this).parents('.grp').find('ul.advanced').toggle();
});

除非您动态添加内容，否则这些应该可以工作。如果动态添加，请使用on()

$('.normal').on('click', '.toggle-advanced', function(){
   $(this).parents('.grp').find('ul.advanced').toggle();
});

【讨论】：

【解决方案2】：

.advanced 不是.grp 元素的兄弟，它是父元素.normal 的兄弟

$(@).closest('.normal').siblings('.advanced').slideToggle();

javascript等于

$('.normal').on('click', '.toggle-advanced', function(){
    $(this).closest('.normal').siblings('.advanced').slideToggle();
})

【讨论】：

【解决方案3】：

你可以试试这个

$(".toggle-advanced").on('click', function(){

    $(this).closest(".normal").siblings('.advanced').slideToggle();

});

此代码是基于 jquery 的

【讨论】：

【解决方案4】：

在 Jquery 中，您可以使用 parent 和 siblings 函数来获取所需的元素。

试试这个：

$('.toggle-advanced').click(function() {
  $('this').parent().siblings().toggleSomething()
});

siblings 返回给定元素的所有兄弟姐妹，在您的情况下，它将始终返回“高级”ul。

【讨论】：

【解决方案5】：

这应该可行。

$("ul.normal>li>button").click(function () {
   $(this).closest('.normal').siblings('.advanced').slideToggle();
});

工作示例：http://jsfiddle.net/riri78/dQcFE/

【讨论】：

如果我点击 ul 中的任何内容，它会切换..，切换必须来自按钮