Question

是否可以使用jQuery选择div所有具有指定类的子div？

例如：如果我点击一个div，它应该切换所点击的.name div所有具有.content类的孩子（div1，div2，div3）。

html：

<div class="name">
    Name of div 1
    <div class="content">
        Content of div 1
    </div>
    <div class="name">
        Name of div 2
        <div class="content">
            Content of div 2
        </div>

        <div class="name">
            Name of div 3
            <div class="content">
                Content of div 3
            </div>
        </div>
    </div>
</div>

剧本：

$(function() 
{
    $('.name').click(function()
    {
       $(this).children('.content').slideToggle();
    });
});

我已尝试过这个脚本，但它只选择了第一级的div。

Answer 1

您的代码有效，但点击是传播。内部name内的点击也是外部name内的点击。加上这个：

$('.name').click(function(e)//pass the event
{
   e.stopPropagation(); // prevent the event from bubbling.
   $(this).children('.content').slideToggle();
});

此外，您使用的是.children，仅针对直接儿童。如果您想要所有孩子（后代），请使用.find()。

Answer 2

您需要停止传播事件，使其不会冒泡树 -

$('.name').click(function(e) {
    e.stopPropagation();
    $(this).find('.content').slideToggle();
});

http://jsfiddle.net/jayblanchard/sSRJ4/

Answer 3

首先让我解释一下你正在尝试做什么的问题

如果您决定点击 DIV 2 ，内容2 和 3 应该打开，
但如果点击 DIV 1 ，将会发生一团糟：

DIV 1将打开，但所有其他将关闭。

<强> EXAMPLE WITH ISSUE (PRESENT IN OTHER ANSWERS)

为了防止 您应该将单击或不状态直接存储到单击的DIV中

<强> WORKING EXAMPLE

$('.name').click(function(ev){
  ev.stopPropagation();
  var io = this.io ^= 1; // Toggle 1/0 state
  $('.content', this)[io?"slideDown":"slideUp"](function(){
    $(this).closest('.name')[0].io = io; // Store state also to all other
  });
});

ev.stopPropagation();阻止点击导航DOM，在非目标元素上触发相同的功能（具有相同的className）
var io = this.io ^= 1;使用XOR ^按位运算符将1/0值（稍后用作布尔值）直接切换到元素Object custom io（或者根据需要命名）属性（或命名它）如你所愿）。
我们所做的是：通过使用条件运算符（？：），我们使用切换的this.io值1或0作为布尔值，并且如果值为1（true），则执行slideDown其他操作，逻辑上为slideUp $('.content', this) .content，this }}）
如果我们没有为幻灯片使用额外的函数回调，则可能会出现双击某些DIV元素的问题，导致该特定元素的io值不是对于它的状态是最新的，所以要改变我们只需要为每个滑动元素设置相同的io状态到.name（切换器）（.closest()）父级。

是否可以使用jQuery访问div的所有子节点

3 个答案: