Jquery $(this)子选择器

问题描述 投票:65回答:4

我正在使用这个:

jQuery('.class1 a').click( function() {
  if ($(".class2").is(":hidden")) {
    $(".class2").slideDown("slow");
  } else {
    $(".class2").slideUp();
  }
});

在页面结构上:

<div class="class1">
  <a href="...">text</a>
  <div class="class2">text</div>
</div>

它只适用于没有多个class1 / class2集合的情况:

<div class="class1">
  <a href="...">text</a>
  <div class="class2">text</div>
</div>
<div class="class1">
  <a href="...">text</a>
  <div class="class2">text</div>
</div>
<div class="class1">
  <a href="...">text</a>
  <div class="class2">text</div>
</div>

如何更改初始jquery代码,以便它只影响被单击的class1下的类2?我试过qazxsw大便的推荐但没有成功。

jquery css-selectors children
4个回答
88
投票

使用HTML的最佳方法可能是使用How to get the children of the $(this) selector?函数,如下所示:

next

由于点击处理程序发生在var div = $(this).next('.class2'); 上,您还可以遍历到父DIV,然后搜索第二个DIV。你可以用<a>parent的组合来做到这一点。如果您提供的HTML不完全相同,并且第二个DIV可能位于相对于链接的另一个位置,则此方法最佳:

children

如果您希望“搜索”不仅限于直接子项,则在上面的示例中使用var div = $(this).parent().children('.class2'); 而不是find

此外,如果可能的话,最好在您的类选择器前加上标签名称。即,如果只有children标签将有这些类,使选择器为<div>div.class1


7
投票

在单击事件中,“this”是单击的标记

div.class2

虽然您也可以使用.siblings,.next等,但有多种方法可以访问div


7
投票

这与jQuery('.class1 a').click( function() { var divToSlide = $(this).parent().find(".class2"); if (divToSlide.is(":hidden")) { divToSlide.slideDown("slow"); } else { divToSlide.slideUp(); } }); 相比要简单得多:

.slideToggle()

编辑:使用.next而不是.siblings

jQuery('.class1 a').click( function() { $(this).next('.class2').slideToggle(); });

您还可以添加cookie以记住您所在的位置...

http://www.mredesign.com/demos/jquery-effects-1/


© www.soinside.com 2019 - 2024. All rights reserved.