隐藏一系列div中的前3个元素。

Question

我想当我按下键盘键时，隐藏div系列中的前3个元素。我试过使用jquery eq(1,2,3)来实现这个功能，但是没有效果。 我正在使用的代码。

  $(document).keydown(function(e) {
        if (e.which == 49) {
          $(".thing span:eq(1,2,3)").hide();
        }
  });

.thing {
  height: 130px;
  width: 100px;
  border: 1px black solid;

  display: block;
  left: 0px;
  position: relative;
}

span {
  display: block;
  background: #f00;
  margin-bottom: 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="thing">
  <span>0</span>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>  
</div>

<div class="thing">
  <span>0</span>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>  
</div>

<div class="thing">
  <span>0</span>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>  
</div>

Answer 1

您的 .eq() 语法不正确，但没关系，因为你可以使用 .lt() 代替。

$(document).keydown(function(e) {
  if (e.which == 49) {
    $(".thing").find("span:lt(4)").hide();
  }
});

.thing {
  height: 130px;
  width: 100px;
  border: 1px black solid;

  display: block;
  left: 0px;
  position: relative;
}

span {
  display: block;
  background: #f00;
  margin-bottom: 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="thing">
  <span>0</span>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>  
</div>

<div class="thing">
  <span>0</span>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>  
</div>

<div class="thing">
  <span>0</span>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>  
</div>

Answer 2

你可以用 .slice() 为此，我编辑了我的选择器来删除更多的元素。我编辑了我的选择器，以删除进一步的元素，当按钮 "1 "被按下一次以上。

如果你想删除每个 "事物 "的前3个可见元素，那么就按 "2"，多次如果你想......

$(document).keydown(function(e) {
  if (e.which == 49){ $(".thing span:not(:hidden)").slice(0,3).hide();}
  if (e.which == 50){ $(".thing").find("span:not(:hidden):lt(3)").hide();}
});

.thing {
  height: 130px;
  width: 100px;
  border: 1px black solid;

  display: block;
  left: 0px;
  position: relative;
}

span {
  display: block;
  background: #f00;
  margin-bottom: 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="thing">
  <span>0</span>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>  
</div>

<div class="thing">
  <span>0</span>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>  
</div>

<div class="thing">
  <span>0</span>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>  
</div>