如何选择这个特定的 div？答案

【问题标题】：How Do I Select This Certain Div?如何选择这个特定的 div？
【发布时间】：2012-08-22 22:00:19
【问题描述】：

假设我有 HTML：

<span class="random"></span>
<div class="parentdiv">
    <img src="" class="button">
</div>
<div class="content-one">
    <div class="content-two">
    </div>
</div>

<span class="random"></span>
<div class="parentdiv">
    <img src="" class="button">
</div>
<div class="content-one">
    <div class="content-two">
    </div>
</div>

我目前可以使用以下 JavaScript 选择 div content-one：

$(".button").toggle(function(){
    $(this).parent().nextAll(".content-one").first().slideUp('slow');
},

我将如何选择 div .content-two 代替？因为我无法弄清楚它会是什么！

原因是页面上有多个类的实例用于切换，因此每次按下按钮时只需选择content-two div 的第一个实例。

【问题讨论】：

img.button 的父元素是哪个元素？它在您的标记中没有父元素！
您需要选择页面上的第一个content-two，还是点击按钮之后的第一个？
选择按钮有效按下后的第一个 .content-two。 @undefined 我已经为你更改了我的初始标记。

标签： javascript jquery toggle

【解决方案1】：

$(".button").toggle(function(){
  $(this).parent().nextAll(".content-one").find(".content-two").first().slideUp('slow');
},

【讨论】：

【解决方案2】：

你不会用“.content-two”替换“.content-one”吗？由于您选择了“.content-one”类，我假设如果您只是将其更改为您想要的类，它会起作用吗？

$(".button").toggle(function(){
    $(".content-two").first().slideUp('slow');
},

http://api.jquery.com/class-selector/

【讨论】：

你会这么认为，但由于某种原因它不起作用。我认为这是因为 .content-two 嵌套在 .content-one 中
next 和 nextAll 看看兄弟姐妹 - 而不是孩子。试试.nextAll(".content-one").nextAll(".content-two")，或children(".content-two")
er，我想我忍者编辑了一点，但我想如果你像这样根据类选择，然后得到第一个，那么你应该可以将 slideUp fn 应用到那个div

【解决方案3】：

$(".button").toggle(function(){
  $(this).next(".content-one").children('.content-two').first().slideUp('slow');
});

【讨论】：

【解决方案4】：

玩弄这个：

$(".content-one:first").css({border:'3px solid red'});
$(".content-one:first div:first").css({border:'3px dotted blue'});

$("div").eq(2).css({border:'3px solid #003366'});
$("div:eq(2)").css({border:'3px dotted blue'});
$("div:eq(2)>div:first").css({border:'3px dotted blue'});

您的问题不够具体，但其中一行有您的答案还可以查看此链接以查看它的实际效果：http://jsfiddle.net/e7MCy/

【讨论】：

【解决方案5】：

$(".button").click(function(){
    $(this).parent().next(".content-one").first(".content-two").toggle('slow');
});

这将获取单击的 .button，然后获取父级，然后获取具有 '.content-one' 作为类的下一个兄弟，然后获取具有 '.content-two' 作为类的第一个子级并切换显示.示例：jsFiddle example

【讨论】：