在另一个div之后将类添加到下一个div

Question

使用jquery，如何找到包含班级section-arrow的所有div，然后将班级padded添加到下一个班级为main-section的div？

因此，在示例中，它通过section-arrow找到第一个div，然后将类padded添加到下一个main-section div。同样适用于第4个div。

<div class="main-section section-arrow"><div></div></div>
<div class="main-section padded"><div></div></div>
<div class="main-section"><div></div></div>
<div class="main-section section-arrow"><div></div></div>
<div class="main-section padded"><div></div></div>

<main id="content" class="site-content" role="main">

    <div class="main-section">
        <section class="row">           
            <div class="columns large-4">
                <div class="brandHeaderContent">

                </div>
            </div>       
        </section>
    </div>

    <div class="main-section section-arrow">
        <section class="row">           
            <div class="columns large-12">
                <div class="brandHeaderContent">

                </div>
            </div>       
        </section>
    </div>

    <style>
    .bannerStripHeader-<?php echo $backgroundColours; ?>:after {
    border-color: <?php echo $backgroundColour; ?> transparent transparent transparent;
    }
    .bannerStripHeader {
    padding-bottom:0px!important;
    }   
    </style>

    <div class="main-section serviceContentRow">
        <section class="row">
            <div class="columns">
                <div class="row">               
                    <div class="columns medium-6 brandHeaderContent">
                        (content)
                    </div>
                </div>          
            </div>
        </section>
    </div>

    <div class="main-section serviceContentRow">
        <section class="row">
            <div class="columns">       
                <div class="row">               
                    <div class="columns  brandHeaderContent">       

                    </div>
                </div>          
            </div>
        </section>
    </div>

    <div class="main-section section-arrow">
        <section class="row">           
            <div class="columns large-12">
                <div class="brandHeaderContent">

                </div>
            </div>   
        </section>
    </div>

    <style>
    .bannerStripHeader-<?php echo $backgroundColours; ?>:after {
    border-color: <?php echo $backgroundColour; ?> transparent transparent transparent;
    }
    .bannerStripHeader {
    padding-bottom:0px!important;
    }   
    </style>

    <div class="main-section serviceContentRow">
        <section class="row">
            <div class="columns">           
                <div class="row">
                    <div class="columns medium-6 brandHeaderContent">
                        (content)   
                    </div>
                </div>          
            </div>
        </section>
    </div>

</main>

Answer 1

要执行此操作，您只需选择.section-arrow元素并使用next()方法即可。试试这个：

$('.section-arrow').next('.main-section').addClass('padded');

.padded {
  border: 1px solid #C00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main id="content" class="site-content" role="main">

  <div class="main-section">
    <section class="row">
      <div class="columns large-4">
        <div class="brandHeaderContent">
          brandHeaderContent 01
        </div>
      </div>
    </section>
  </div>

  <div class="main-section section-arrow">
    <section class="row">
      <div class="columns large-12">
        <div class="brandHeaderContent">
          brandHeaderContent 02
        </div>
      </div>
    </section>
  </div>

  <div class="main-section serviceContentRow">
    <section class="row">
      <div class="columns">
        <div class="row">
          <div class="columns medium-6 brandHeaderContent">
            (content)
          </div>
        </div>
      </div>
    </section>
  </div>

  <div class="main-section serviceContentRow">
    <section class="row">
      <div class="columns">
        <div class="row">
          <div class="columns  brandHeaderContent">
            brandHeaderContent 03
          </div>
        </div>
      </div>
    </section>
  </div>

  <div class="main-section section-arrow">
    <section class="row">
      <div class="columns large-12">
        <div class="brandHeaderContent">
          brandHeaderContent 04
        </div>
      </div>
    </section>
  </div>

  <div class="main-section serviceContentRow">
    <section class="row">
      <div class="columns">
        <div class="row">
          <div class="columns medium-6 brandHeaderContent" style="color:#000 !important;">
            (content)
          </div>
        </div>
      </div>
    </section>
  </div>

</main>