使用Jquery单击按钮后,在前5个元素上添加样式

Question

我有像这样的HTML代码

<div class="main">
    <div class="button hide">1</div>
    <div class="button hide">2</div>
    <div class="button hide">3</div>
    <div class="button hide">4</div>
    <div class="button hide">5</div>
    <div class="button hide">6</div>
    <div class="button hide">7</div>
 ..........
</div>
<a href="#" class="input">ZZZ</a>

我想display:block在点击之后添加样式到前五个按钮(在这种情况下为1,2,3,4,5)ZZZ并再次如果我点击按钮ZZZ我想要隐藏前5个按钮并添加样式display:block到6,7,8,9 ,10

我可以想到这里,但我们知道风格适用于所有元素.是否可以仅为前五个按钮添加它？

$(".input").click(function(){
    $(.button).css("display","block");
});

谢谢 :)

Answer 1

您可以使用:lt伪选择器来选择第一个n元素.

选择索引小于匹配集中索引的所有元素.

$('.input').on('click', function() {
  $('.button:lt(5)').removeClass('hide');
  return false;
});

.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="main">
  <div class="button hide">1</div>
  <div class="button hide">2</div>
  <div class="button hide">3</div>
  <div class="button hide">4</div>
  <div class="button hide">5</div>
  <div class="button hide">6</div>
  <div class="button hide">7</div>
  ..........
</div>
<a href="#" class="input">ZZZ</a>

编辑

要在5索引后选择元素,可以使用:gt伪选择器.

选择匹配集中索引大于索引的所有元素.

$('.input').on('click', function() {
  $('.button:gt(4)').removeClass('hide');
  return false;
});

.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="main">
  <div class="button hide">1</div>
  <div class="button hide">2</div>
  <div class="button hide">3</div>
  <div class="button hide">4</div>
  <div class="button hide">5</div>
  <div class="button hide">6</div>
  <div class="button hide">7</div>
  ..........
</div>
<a href="#" class="input">ZZZ</a>