Скрыть каждый вторую картинку в блоки — jQuery?

Question

[matros97]

Доброе утро! Подскажите как мне такое можно реализовать
Есть такая разметка

<div class="card-columns">
     
<div class="card">
  <img class="card-img-top" src="images/blog-img.png" alt="Card image cap">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
  </div>
  <div class="card-footer">
   <small class="text-muted"><i class="fa fa-eye" aria-hidden="true"></i>1585</small>
   <small class="text-muted"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i>45</small>
   <small class="text-muted"><i class="fa fa-comments-o" aria-hidden="true"></i>27</small>
 </div>
</div>
<div class="card">
  <img class="card-img-top" src="images/blog-img.png" alt="Card image cap">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
  </div>
  <div class="card-footer">
   <small class="text-muted"><i class="fa fa-eye" aria-hidden="true"></i>1585</small>
   <small class="text-muted"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i>45</small>
   <small class="text-muted"><i class="fa fa-comments-o" aria-hidden="true"></i>27</small>
 </div>
</div>
<div class="card">
  <img class="card-img-top" src="images/blog-img.png" alt="Card image cap">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
  </div>
  <div class="card-footer">
   <small class="text-muted"><i class="fa fa-eye" aria-hidden="true"></i>1585</small>
   <small class="text-muted"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i>45</small>
   <small class="text-muted"><i class="fa fa-comments-o" aria-hidden="true"></i>27</small>
 </div>
</div>
 
</div>

И мне надо в каждом втором блоке скрыть изображения )
Подскажите как такое можно сделать, в JS не сильно силен только учусь

Answer 1

[HamSter]

Как вариант, можно обойтись без скриптов, используя один лишь css:

.card:nth-of-type(2n) img {
  display: none;
}

Если все же использовать jquery, то например так:

$('.card').each(function(i) {
    if(i%2){
      $(this).find('img').hide();
    }
});

jsbin

Answer 2

[Griboks]

$('.card:even>img').hide();

Comments

[Griboks]

Для улучшения производительности рекомендуется в начале найти базовые элементы, и уже к этому набору применить фильтрующую функцию .filter() с этим селектором (:even).