JQuery选择器每3项更改一次

时间:2017-07-25 13:11:39

标签: javascript jquery css

我正在使用PHP循环并在一个MainStruct中创建多个// Inputs, outputs and properties struct SharedBuffers { template <typename Alloc> SharedBuffers(Alloc alloc = {}) : m_inputs(alloc), m_outputs(alloc) {} Shared::Vector<SimpleData> m_inputs; Shared::Vector<SimpleData> m_outputs; }; SharedBuffers* m_buffers; // bip::offset_ptr<> is overkill outside shared memory 。 问题是,当我点击前三个li中的一个时,我需要每隔四分之一ul显示一次。

目前它仅适用于前一个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');

});

1 个答案:

答案 0 :(得分:3)

您可以使用nextAll()定位以下兄弟actu_details元素,然后使用:first / :eq(0) / .eq(0) / .first()首先定位{ {1}}

li

&#13;
&#13;
$('.last_news li').on('click', function () {
    $(this).nextAll('.actu_details:first').toggleClass('expend');
    //$(this).nextAll('.actu_details').eq(0).toggleClass('expend');
});
&#13;
 $('.last_news li').on('click', function() {
   $(this).nextAll('.actu_details:first').toggleClass('expend');
 });
&#13;
.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;
}
&#13;
&#13;
&#13;

Fiddle