javascript - 如何选择这个特定的 div？

Question

假设我有 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 的第一个实例。

Answer 1

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

Answer 2

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

Answer 3

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

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

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

Answer 4

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

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

Answer 5

玩这个：

$(".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/