jQuery按父类获取元素

我的HTML如下所示：

<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切换它。

您可以使用和：

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

试试：

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

“parents”-这将获得类为“wrapper”的父元素 “find”-这将在包装器中查找类为“container1”的子元素

若您使用jquery绑定到事件，那个么“this”将作用于目标元素。您还可以从事件参数“e.target”获取目标

---

这里是jsfiddle:

也许在这种情况下，您可以使用

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

请参阅以获取一个小演示。

试试这个

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

---

这取决于您是否始终要切换按钮容器的前一个同级？如果是这样，您只需执行一个

.parent（）.prev（'div'）

即可从

到

.container1

div。父级转到.container2，然后.prev（'div'）选择.container1。在这种情况下，

最近的

总是比

父级

更可取。您不需要/不想搜索回DOM根。@TrueBlueAussie您是对的。除了Perf stats（这很有用），在这里可以找到Perf comparison（性能比较），在找到第一个匹配项时停止显然要比搜索每个父项（返回到根目录）中的任何/所有匹配项更快：）我同意。但答案应该更多地用作一个概念（您也不会选择所有“a”元素），而不是复制/粘贴到解决方案中。您可以只使用普通javascript轻松地遍历到目标元素—如果您希望挤出最大性能：）您知道，我甚至没有发现您使用的“a”。。。提供

class=“button”

时不好。除了这些问题之外，我确实更喜欢您的特定选择器，尽管它们对HTML更改更具鲁棒性：）Jai的回答是这一组中“最正确的”（IMHO），尽管

单击
会更可取，因为他在
上的
不会被委托（像您的那样）。或者可能
父项（）.sibles（）.first（）.toggle（）
。这取决于html的外观。@TrueBlueAussie：很好，我认为OP主要是关于选择器的。就我个人而言，我不会选择正确的答案，因为它是最脆弱的。它取决于确切的结构（而不是选择器匹配），这对于维护来说总是一个坏主意。干得好：）@TrueBlueAussie不是真的。如果没有它，您将滚动到窗口的顶部+1：虽然在本例中，在
上使用
的可读性不如
单击
，但这是我最喜欢的答案。它最有可能在HTML更改中幸存（并且它正确地禁用了锚单击）。
$('.button').on('click', function(e){
    e.preventDefault();
      $(this).closest('.wrapper').find('.container1').toggle();
});