Jquery-如何给子元素添加类？

Question

我有这样一段html代码，

<div>
    <header>
        <div>Title</div>
        <h5> sub title </h5>
        <button id="submit">Button</button>
    </header>
    <div class="toggleclass"></div>
</div>

我想在按钮标签的最后一个 div 标签 onclick 中添加一个类(“open”)。单击我可以这样做，

$(".toggleclass").addClass("open");

但我希望它在父子结构中。类似的东西，

$("#submit").children('div').addClass("open");

我试过上面的代码，但它不起作用

Answer 1

给定您的 HTML:

<div>
    <header>
        <div>Title</div>
        <h5> sub title </h5>
        <button id="submit">Button</button>
    </header>
    <div class="toggleclass"></div>
</div>

你的 jQuery:

$("#submit").children('div').addClass("open");

不可能工作，因为您选择了按钮 #submit然后使用 children()找 child <div>的 <button>元素。你会注意到 <button>不是该元素的子元素。首先你必须移动到<header>元素，然后找到 nextSibling (尽管使用 jQuery 的 next() 方法):

$('#submit').on('click', function () {
    // the element that was clicked:
    $(this)
        // finding the first ancestor <header> element:
        .closest('header')
        // finding the next sibling, if it matches the selector:
        .next('.toggleclass')
       // adding the 'open' class-name:
       .addClass('open');
});

$('#submit').on('click', function () {
    // the element that was clicked:
    $(this)
        // finding the first ancestor <header> element:
        .closest('header')
        // finding the next sibling, if it matches the selector:
        .next('.toggleclass')
       // adding the 'open' class-name:
       .addClass('open');
});

.toggleclass::before {
  content: attr(class);
}

.open {
  color: #f90;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <header>
        <div>Title</div>
        <h5> sub title </h5>
        <button id="submit">Button</button>
    </header>
    <div class="toggleclass"></div>
</div>

或者，您可以直接移动到包装 <div> , 然后从那里使用 find('.toggleclass') :

$('#submit').on('click', function () {
    // the element that was clicked:
    $(this)
        // finding the first ancestor <div> element:
        .closest('div')
        // finding the descendent '.toggleclass' elements:
        .find('.toggleclass')
       // adding the 'open' class-name:
       .addClass('open');
});

$('#submit').on('click', function () {
    // the element that was clicked:
    $(this)
        // finding the first ancestor <div> element:
        .closest('div')
        // finding the descendent '.toggleclass' elements:
        .find('.toggleclass')
       // adding the 'open' class-name:
       .addClass('open');
});

.toggleclass::before {
  content: attr(class);
}

.open {
  color: #f90;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <header>
        <div>Title</div>
        <h5> sub title </h5>
        <button id="submit">Button</button>
    </header>
    <div class="toggleclass"></div>
</div>

如果，作为 <div> 的类名暗示，您想切换 'open' <div> 的类名, 你可以使用 toggleClass('open')而不是 addClass('open') :

$('#submit').on('click', function () {
    // the element that was clicked:
    $(this)
        // finding the first ancestor <div> element:
        .closest('div')
        // finding the descendent '.toggleclass' elements:
        .find('.toggleclass')
       // adding the 'open' class-name:
       .toggleClass('open');
});

.toggleclass::before {
  content: attr(class);
}

.open {
  color: #f90;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <header>
        <div>Title</div>
        <h5> sub title </h5>
        <button id="submit">Button</button>
    </header>
    <div class="toggleclass"></div>
</div>

引用资料:

• addClass() .
• closest() .
• find() .
• next() .
• toggleClass() .