CODEWITHSUNDEEP
jquery
Dheeraj Kumar
Dheeraj Kumar

Reputation: 75

Hide every first 3 elements in a series of div

I want to hide every first 3 elements in a series of div, when I press keyboard button. I have tried using the jquery eq(1,2,3) for this but it is not working. I am using the code:

  $(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>

Upvotes: 2

Views: 46

Answers (2)

Carsten Massmann
Carsten Massmann

Reputation: 28196

You can use .slice() for this purpose. I edited my selector to remove further elements, when the button "1" is pressed more than once.

If you want to remove the first 3 visible elements per "thing" then press "2", multiple times if you want ... 

$(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>

Upvotes: 0

j08691
j08691

Reputation: 207901

Your .eq() syntax is incorrect but that's OK because you can use .lt() instead:

$(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>

Upvotes: 1

Related Questions