使用特定的类jquery将类添加到下一个div

Question

我创建了一个表，当我点击“heading”时，我想将“open”类添加到下一个拥有jQuery类“sub”的div。

我的代码不起作用：

function table_show() {
    jQuery('.heading th').click(function(e) {
        e.preventDefault();

        jQuery(this).nextUntil('.heading').addClass('open');
    });
}

我可以帮忙吗？

<table>
    <tr class="heading"></tr>
    <tr class="sub"></tr>
    <tr class="sub"></tr>
    <tr class="sub"></tr>
    <tr class="heading"></tr>
    <tr class="sub"></tr>
    <tr class="sub"></tr>
    <tr class="sub"></tr>
</table>

示例：

<table>
    <tr class="heading"></tr>
    <tr class="sub open"></tr>
    <tr class="sub open"></tr>
    <tr class="sub open"></tr>
    <tr class="heading"></tr>
    <tr class="sub"></tr>
    <tr class="sub"></tr>
    <tr class="sub"></tr>
</table>

Answer 1

由于您点击了td课程中的heading，请使用jQuery(this).parent()返回.heading元素

您还可以从th之类的点击中删除jQuery('.heading').click，然后您就不需要.parent()

＆＃13;

＆＃13;

function table_show() {
  jQuery('.heading th').click(function(e) {
    e.preventDefault();

    jQuery(this).parent().nextUntil('.heading').addClass('open');
  });
}

table_show()

＆＃13;

.open {
  color: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="heading"><th>heading</th></tr>
  <tr class="sub"><th>sub</th></tr>
  <tr class="sub"><th>sub</th></tr>
  <tr class="sub"><th>sub</th></tr>
  <tr class="heading"><th>heading</th></tr>
  <tr class="sub"><th>sub</th></tr>
  <tr class="sub"><th>sub</th></tr>
  <tr class="sub"><th>sub</th></tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您需要将open添加到TR元素的兄弟节点，然后使用.closest()遍历它，然后执行所需的操作。

jQuery(this).closest('.heading').nextUntil('.heading').addClass('open');

＆＃13;

＆＃13;

function table_show() {
  jQuery('.heading th').click(function(e) {
    e.preventDefault();
    jQuery(this).closest('.heading').nextUntil('.heading').addClass('open');
  });
}

table_show()

＆＃13;

.open {
  color: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="heading">
    <th>heading</th>
  </tr>
  <tr class="sub">
    <th>sub</th>
  </tr>
  <tr class="sub">
    <th>sub</th>
  </tr>
  <tr class="sub">
    <th>sub</th>
  </tr>
  <tr class="heading">
    <th>heading</th>
  </tr>
  <tr class="sub">
    <th>sub</th>
  </tr>
  <tr class="sub">
    <th>sub</th>
  </tr>
  <tr class="sub">
    <th>sub</th>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

OR ，使用TR

附加事件处理程序

jQuery('.heading').click(function(e) {
    e.preventDefault();
    jQuery(this).nextUntil('.heading').addClass('open');
});

＆＃13;

＆＃13;

function table_show() {
  jQuery('.heading').click(function(e) {
    e.preventDefault();
    jQuery(this).nextUntil('.heading').addClass('open');
  });
}

table_show()

＆＃13;

.open {
  color: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="heading">
    <th>heading</th>
  </tr>
  <tr class="sub">
    <th>sub</th>
  </tr>
  <tr class="sub">
    <th>sub</th>
  </tr>
  <tr class="sub">
    <th>sub</th>
  </tr>
  <tr class="heading">
    <th>heading</th>
  </tr>
  <tr class="sub">
    <th>sub</th>
  </tr>
  <tr class="sub">
    <th>sub</th>
  </tr>
  <tr class="sub">
    <th>sub</th>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;