的jQuery获取元素的类的父

我的HTML看起来像这样的：的jQuery获取元素的类的父

<div class="wrapper"> 
<div class="container1"> 
This is the Element i want to toggle 
</div> 
<div class="container2"> 
<a href="#" class="button">Click</a> 
</div> 
</div>

我想通过点击按钮来切换container1。事情是有几个结构，所以我不能使用ID。我需要在jQuery中使用event.target函数，但我不知道如何获取父元素和父元素中的“container1”元素以及如何使用slideToggle切换它。

来源

2014-02-26 Philip Feldmann

这要看是它总是要切换按钮容器的前一个兄弟？如果是这样，你可以做'.parent（）。prev（'div'）'从''到'.container1' div。父级转到.container2，然后.prev（'div'）选择.container1。 –

也许是这个情况下，你可以使用类似

$('.button').click(function(){ 
    $(this) 
     .parent() 
     .siblings() 
     .first() 
     .toggle();

见 this fiddle一个小小的演示。

来源

2014-02-26 14:33:44 RubenGeert

@TrueBlueAussie：很好，我认为OP主要是关于选择器。 – RubenGeert

个人而言，我不会选择这个答案，因为它是最脆弱的答案。它取决于确切的结构（而不是选择器匹配），这对维护来说总是一个坏主意。无论如何，干得好:) –

$('.button').click(function(){ 
    $(this).parent().siblings('.container1').toggle(); 
});

来源

2014-02-26 14:29:23 goten

或者'.parent（）.siblings（）。first（）。toggle（）'。有点取决于html可能/不可能看起来像什么。 – RubenGeert

您可以使用closest()和siblings()这里：

$('.button').click(function(e) { 
    e.preventDefault(); 
    $(this).closest('.container2').siblings('.container1').toggle(); 
})

Fiddle Demo

来源

2014-02-26 14:31:36 Felix

@TrueBlueAussie不正确。没有它，你会被滚动到窗口顶部 – longchiwen

尝试：

$("a").on("click",function(e){ 
    var el=$(this); // this will be a element 
    el.parents(".wrapper").find(".container1").toggle(); 
    });

“父母” - 这将让你的父与类元素“WRA pper“ ”找到“ - 这将找到包装类中的子类”container1“的子元素

如果使用jquery绑定到事件，则”this“作用域为目标元素。您还可以从事件参数“e.target”

这里的jsfiddle得到目标：http://jsfiddle.net/25vaT/

来源

2014-02-26 14:32:35 longchiwen

'最接近'在这种情况下永远比'父母'更可取。您不需要/不需要搜索回DOM根目录。 –

@TrueBlueAussie你是对的。 Perf比较可以在这里找到http://jsperf.com/jquery-parents-vs-closest/8 – longchiwen

抛开Perf统计数据（虽然这很有用），当你发现第一场比赛时停下来显然会比搜索每一场比赛更快父母，回到根，为任何/所有匹配:) –

试试这个

$('.button').on('click', function(e){ 
    e.preventDefault(); 
     $(this).closest('.wrapper').find('.container1').toggle(); 
});

来源

2014-02-26 14:37:54 Jai

+1：尽管在这种情况下使用'on'比'click'更不可读，这是我最喜欢的答案。这是最有可能的HTML更改生存（并正确禁用锚定点击）。 –

的jQuery获取元素的类的父

回答

相关问题