Question

我有一个像这样的HTML代码，

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

我想添加一个类（＆＃34;打开＆＃34;）到按钮标签上的最后一个div标签。 Onclick我可以这样做，

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

但我希望它在父母和子女的结构中。等等，

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

我尝试了上面的代码，但它无法正常工作

Answer 1

jQuery(document).ready(function(){
         jQuery('#submit').click(function(){

         jQuery(this).parent('header').next('.toggleclass').addClass('open');
   });
});

Answer 2

鉴于你的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()查找<div>的孩子<button>元件。您会注意到<button>不是该元素的子元素。首先，您必须移至<header>元素，然后找到nextSibling（尽管使用jQuery＆＃39; s 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');
});

＆＃13;

$('#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');
});

＆＃13;

.toggleclass::before {
  content: attr(class);
}

.open {
  color: #f90;
}

＆＃13;

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

＆＃13;

或者，您可以直接前往包裹<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');
});

＆＃13;

$('#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');
});

＆＃13;

.toggleclass::before {
  content: attr(class);
}

.open {
  color: #f90;
}

＆＃13;

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

＆＃13;

如果<div>的类名暗示您要切换'open'的{{1}}类名，则可以使用<div>而不是toggleClass('open') addClass('open')：

＆＃13;

$('#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');
});

＆＃13;

.toggleclass::before {
  content: attr(class);
}

.open {
  color: #f90;
}

＆＃13;

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

＆＃13;

参考文献：

Answer 3

试试这个。

$（“＃submit”）。parent（）。parent（）。find（“＆gt; div”）。addClass（“open”）;

Jquery - 如何将类添加到子元素？

3 个答案: