Question

我想在第一个和最后一个＆＃39; .sub＆＃39;添加一个课程。在两个＆＃39; .heading＆＃39;之间用jQuery编写类。

    <table>
        <tr class="heading"></tr>
        <tr class="sub top-box"></tr>
        <tr class="sub"></tr>
        <tr class="sub bottom-box"></tr>
        <tr class="heading"></tr>
        <tr class="sub top-box"></tr>
        <tr class="sub"></tr>
        <tr class="sub"></tr>
        <tr class="sub"></tr>
        <tr class="sub bottom-box"></tr>
    </table>

我试试这个，但那不起作用：

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

        jQuery('.sub:first').nextUntil('.heading').toggleClass('top-box');
        jQuery('.sub:last').nextUntil('.heading').toggleClass('bottom-box');
    });

Answer 1

如果我理解正确，您希望在第一个sub项目之后使用类.heading的下一个项目，以及在最后一个.sub项目之前的.heading吗？

jQuery('.heading').click(function(e) {
  e.preventDefault();
  jQuery(".heading").first().next(".sub").toggleClass("top-box");
  jQuery(".heading").last().prev(".sub").toggleClass("bottom-box");
});

.top-box {background: red;}
.bottom-box {background: blue;}
.heading {cursor: pointer;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="heading"><td>HEADING</td></tr>
  <tr class="sub top-box"><td>sub</td></tr>
  <tr class="sub"><td>sub</td></tr>
  <tr class="sub bottom-box"><td>sub</td></tr>
  <tr class="heading"><td>HEADING</td></tr>
  <tr class="sub top-box"><td>sub</td></tr>
  <tr class="sub"><td>sub</td></tr>
  <tr class="sub"><td>sub</td></tr>
  <tr class="sub"><td>sub</td></tr>
  <tr class="sub bottom-box"><td>sub</td></tr>
</table>

Answer 2

您可以使用:first / :last选择器以及prev() / next()方法执行此操作。

$('.heading:first').next('.sub').addClass("top-box")
$('.heading:last').prev('.sub').addClass("bottom-box")

.top-box{
  background-color:yellow
}
.bottom-box{
  background-color:green
}

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

Answer 3

试试这个...它可能会让它变得更加花哨：D

jQuery('.heading').click(function(e) {
        e.preventDefault();
        var i = 0;
        $('.heading').each(function(){
          if(i % 2 = 0){
            jQuery(this).next(".sub").toggleClass("top-box");
          }else{
            jQuery(this).prev(".sub").toggleClass("bottom-box");
          }
          i++;
        });
    });

将类添加到jquery

3 个答案: