Jquery $(this) 子选择器

发布于 2024-07-18 10:50:59 字数 982 浏览 5 评论 0原文

我正在使用这个：

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 下的 class2？我尝试了如何获取 $(this) 选择器的子级？的建议，但是还没有成功。

原文

I'm using this:

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

On page structure:

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

It only works when you don't have multiple class1/class2 sets like:

<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>

How do I change the initial jquery code so that it only effects class2 under the class1 that was clicked? I tried recommendations from How to get the children of the $(this) selector? but haven't succeeded.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

最舍不得你 2024-07-25 10:51:00

使用 .slideToggle() 更简单：

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

编辑：将其设为 .next 而不是 .siblings

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

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

http://c.hadcoleman.com/2008/09/jquery-slide-toggle-with-cookie/

This is a lot simpler with .slideToggle():

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

EDIT: made it .next instead of .siblings

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

You can also add cookie's to remember where you're at...

http://c.hadcoleman.com/2008/09/jquery-slide-toggle-with-cookie/

回复收藏 0 原文

药祭#氼 2024-07-25 10:51:00

http://jqapi.com/
穿越--> 树遍历--> 孩子们

回复收藏 0 原文

你怎么这么可爱啊 2024-07-25 10:50:59

使用 HTML 的最佳方法可能是使用 next< /a> 函数，如下所示：

var div = $(this).next('.class2');

由于单击处理程序发生在上，您还可以向上遍历到父 DIV，然后向下搜索第二个 DIV。您可以结合使用 parent 和 子项。如果您放置的 HTML 不完全一样，并且第二个 DIV 可能位于相对于链接的另一个位置，那么这种方法将是最好的：

var div = $(this).parent().children('.class2');

如果您希望“搜索”不限于直接子级，您可以使用find 而不是 children多于。

另外，如果可能的话，最好在类选择器前面添加标签名称。即，如果只有

标签具有这些类，则将选择器设置为 div.class1、div.class2。

The best way with the HTML you have would probably be to use the next function, like so:

var div = $(this).next('.class2');

Since the click handler is happening to the <a>, you could also traverse up to the parent DIV, then search down for the second DIV. You would do this with a combination of parent and children. This approach would be best if the HTML you put up is not exactly like that and the second DIV could be in another location relative to the link:

var div = $(this).parent().children('.class2');

If you wanted the "search" to not be limited to immediate children, you would use find instead of children in the example above.

Also, it is always best to prepend your class selectors with the tag name if at all possible. ie, if only <div> tags are going to have those classes, make the selector be div.class1, div.class2.

回复收藏 0 原文

怼怹恏 2024-07-25 10:50:59

在点击事件中，“this”是被点击的 a 标签

jQuery('.class1 a').click( function() {
   var divToSlide = $(this).parent().find(".class2");
   if (divToSlide.is(":hidden")) {
      divToSlide.slideDown("slow");
   } else {
      divToSlide.slideUp();
   }
});

有多种方法可以到达 div，尽管您也可以使用 .siblings、.next 等

In the click event "this" is the a tag that was clicked

jQuery('.class1 a').click( function() {
   var divToSlide = $(this).parent().find(".class2");
   if (divToSlide.is(":hidden")) {
      divToSlide.slideDown("slow");
   } else {
      divToSlide.slideUp();
   }
});

There's multiple ways to get to the div though you could also use .siblings, .next etc

回复收藏 0 原文

~没有更多了~