javascript - JQuery 选择器每 3 个元素更改一次

Question

我正在使用 PHP 循环并在一个 ul 中创建多个 li。 问题是，当我点击前三个 li 之一时，我需要每隔四个 li 显示一次。

目前它只适用于前面的第一个 li :

  $('.last_news li').on('click', function(){

      $('+ .actu_details',this).toggleClass('expend');

  });

谁有线索

$('.last_news li').on('click', function() {

  $('+ .actu_details', this).toggleClass('expend');

});

last_news {
  padding: 35px
}

ul {
  padding-left: 0px;
  margin: 0;
  overflow: hidden;
}

ul li {
  list-style-type: none;
  cursor: pointer;
  float: left;
  width: 33%;
  height: 250px;
  background-color: red;
  margin-right: 0.5%;
  margin-bottom: 5px;
  color: #FFF;
  position: relative;
}

li:nth-of-type(3) {
  margin-right: 0;
}

li:nth-of-type(4n+7) {
  margin-right: 0;
}

li.actu_details {
  width: 100%;
  height: 0px;
  background-color: green;
  display: block;
}

li.actu_details.expend {
  height: 350px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="last_news">
  <div class="contenu_grid">
    <ul>
      <li class="une_actu">Test</li>
      <li class="une_actu">Test</li>
      <li class="une_actu">Test</li>
      <li class="actu_details">
        Detail
      </li>
      <li class="une_actu">Test</li>
      <li class="une_actu">Test</li>
      <li class="une_actu">Test</li>
      <li class="actu_details">
        Detail
      </li>
      <li class="une_actu">Test</li>
      <li class="une_actu">Test</li>
      <li class="une_actu">Test</li>
      <li class="actu_details">
        Detail
      </li>
    </ul>
  </div>
</section>

Answer 1

您可以使用 nextAll() 来定位以下同级 actu_details 元素，然后使用 :first/:eq(0)/.eq(0)/.first() 以第一个 li

为目标

$('.last_news li').on('click', function () {
    $(this).nextAll('.actu_details:first').toggleClass('expend');
    //$(this).nextAll('.actu_details').eq(0).toggleClass('expend');
});

 $('.last_news li').on('click', function() {
   $(this).nextAll('.actu_details:first').toggleClass('expend');
 });

.last_news {
  padding: 35px
}

ul {
  padding-left: 0px;
  margin: 0;
  overflow: hidden;
}

ul li {
  list-style-type: none;
  cursor: pointer;
  float: left;
  width: 33%;
  height: 250px;
  background-color: red;
  margin-right: 0.5%;
  margin-bottom: 5px;
  color: #FFF;
  position: relative;
}

li:nth-of-type(3) {
  margin-right: 0;
}

li:nth-of-type(4n+7) {
  margin-right: 0;
}

li.actu_details {
  width: 100%;
  height: 0px;
  background-color: green;
  display: block;
}

li.actu_details.expend {
  height: 350px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="last_news">
  <div class="contenu_grid">
    <ul>
      <li class="une_actu">Test</li>
      <li class="une_actu">Test</li>
      <li class="une_actu">Test</li>
      <li class="actu_details">
        Detail
      </li>
      <li class="une_actu">Test</li>
      <li class="une_actu">Test</li>
      <li class="une_actu">Test</li>
      <li class="actu_details">
        Detail
      </li>
      <li class="une_actu">Test</li>
      <li class="une_actu">Test</li>
      <li class="une_actu">Test</li>
      <li class="actu_details">
        Detail
      </li>
    </ul>
  </div>
</section>

Fiddle