Скрыть один из div'ов с одинаковыми class'ами

174

15 ноября 2018, 10:50

Есть несколько div'ов с одинаковыми class'ами, как можно скрыть пару div'ов из них? id не могу добавить.

<div buttontype="1" class="item-transparent"></div>
<div buttontype="2" class="item-transparent"></div>
<div buttontype="3" class="item-transparent"></div>
<div buttontype="4" class="item-transparent"></div>

Div'ы различаются только buttontype.

Answer 1

При помощи JQ

$('input').on('click',function(){ 
  var dataType = $(this).data('type'); 
  $('.item-transparent[buttontype="'+dataType+'"]').hide(); 
});

.item-transparent { 
  display: block; 
  width: 100px; 
  height: 30px; 
  margin: 0 0 10px; 
  background: red; 
} 
 
.item-transparent[buttontype] { 
  background: blue; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="item-transparent"></div> 
<div class="item-transparent"></div> 
<div class="item-transparent"></div> 
 
<div buttontype="1" class="item-transparent"></div> 
<div buttontype="2" class="item-transparent"></div> 
<div buttontype="3" class="item-transparent"></div> 
<div buttontype="4" class="item-transparent"></div> 
 
<input type="button" value="hide 1" data-type="1" /> 
<input type="button" value="hide 2" data-type="2" /> 
<input type="button" value="hide 3" data-type="3" /> 
<input type="button" value="hide 4" data-type="4" />

При помощи CSS

.item-transparent {display: block; width: 100px; height: 30px; background: red; margin: 0 0 5px;} 
.item-transparent[buttontype] {display: none;}

<div class="item-transparent"></div> 
<div class="item-transparent"></div> 
<div class="item-transparent"></div> 
 
<div buttontype="1" class="item-transparent"></div> 
<div buttontype="2" class="item-transparent"></div> 
<div buttontype="3" class="item-transparent"></div> 
<div buttontype="4" class="item-transparent"></div>

Answer 2

Можете попробовать через псевдокласс вот так:

<div class="list">
 <div buttontype="1" class="item-transparent"></div>
 <div buttontype="2" class="item-transparent"></div>
 <div buttontype="3" class="item-transparent"></div>
 <div buttontype="4" class="item-transparent"></div>
</div>
.list:nth-child(1):{
      display:none;
}
.list:nth-child(3):{
      display:none;
}

Answer 3

.item-transparent {display: block; width: 100px; height: 30px; background: red; margin: 0 0 5px;} 
.item-transparent[buttontype$="1"] {display: none;}

<div class="item-transparent"></div> 
<div class="item-transparent"></div> 
<div class="item-transparent"></div> 
 
<div buttontype="1" class="item-transparent"></div> 
<div buttontype="2" class="item-transparent"></div>