Перебрать все элементы на странице с определённым идентификатором

253

10 апреля 2017, 06:17

Есть функция, которая перебирает все элементы на странице с определённым классом и поочерёдно сбрасывает с них стили:

$('.card').each(function(i){
    setTimeout(() => $(this).css({'opacity': '', 'transform':''}), i*100);
});

Но как можно сделать так, чтобы перебирались только те блоки, у которых, например, атрибут id больше 6 и меньше 10 и анимировались только они?

$('.card').each(function(i){ 
if($(this).attr('id') >= 15 && $(this).attr('id') <= 20) 
	setTimeout(() => $(this).css({'opacity': '', 'transform':''}), i*100); 
});

.card { 
   transition: all .2s ease-in-out; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="card" id="1" style="opacity: 0; transform: translateY(40px);">1</div> 
<div class="card" id="2" style="opacity: 0; transform: translateY(40px);">2</div> 
<div class="card" id="3" style="opacity: 0; transform: translateY(40px);">3</div> 
<div class="card" id="4" style="opacity: 0; transform: translateY(40px);">4</div> 
<div class="card" id="5" style="opacity: 0; transform: translateY(40px);">5</div> 
<div class="card" id="6" style="opacity: 0; transform: translateY(40px);">6</div> 
<div class="card" id="7" style="opacity: 0; transform: translateY(40px);">7</div> 
<div class="card" id="8" style="opacity: 0; transform: translateY(40px);">8</div> 
<div class="card" id="9" style="opacity: 0; transform: translateY(40px);">9</div> 
<div class="card" id="10" style="opacity: 0; transform: translateY(40px);">10</div> 
<div class="card" id="11" style="opacity: 0; transform: translateY(40px);">11</div> 
<div class="card" id="12" style="opacity: 0; transform: translateY(40px);">12</div> 
<div class="card" id="13" style="opacity: 0; transform: translateY(40px);">13</div> 
<div class="card" id="14" style="opacity: 0; transform: translateY(40px);">14</div> 
<div class="card" id="15" style="opacity: 0; transform: translateY(40px);">15</div> 
<div class="card" id="16" style="opacity: 0; transform: translateY(40px);">16</div> 
<div class="card" id="17" style="opacity: 0; transform: translateY(40px);">17</div> 
<div class="card" id="18" style="opacity: 0; transform: translateY(40px);">18</div> 
<div class="card" id="19" style="opacity: 0; transform: translateY(40px);">19</div> 
<div class="card" id="20" style="opacity: 0; transform: translateY(40px);">20</div>

Answer 1

Когда вставляете новые строки, назначайте им специальный класс, который означает что элемент требуется анимировать, потом по таймауту убираете этот класс - включается анимация. Таким образом анимироваться будут только последние добавленные элементы.

PS. Старайтесь избегать использования id для адресации элементов для JS а также использования встроенных стилей.

function anim() { 
  $('.card.anim').each(function(i) { 
    setTimeout(() => $(this).removeClass('anim'), i * 100 + 100); 
  }); 
} 
 
$('.append').on('click', function(e) { 
  var ix; 
  e.preventDefault(); 
  for (ix = 5; ix >= 0; ix -= 1) { 
    $('.container').append($('<div class="card anim">**</div>')); 
  } 
  anim(); 
}); 
 
anim();

.card { 
  transition: all .2s ease-in-out; 
} 
 
.anim { 
  opacity: 0; 
  transform: translateY(40px); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<button class="append">Еще<button> 
<div class="container"> 
  <div class="card">1</div> 
  <div class="card">2</div> 
  <div class="card">3</div> 
  <div class="card">4</div> 
  <div class="card">5</div> 
  <div class="card anim">6</div> 
  <div class="card anim">7</div> 
  <div class="card anim">8</div> 
  <div class="card anim">9</div> 
  <div class="card anim">10</div> 
</div>

Answer 2

each(function(i,j) // добавьте второй аргумент в цикл

if (parseInt($(j).attr('id')) <= 10 && parseInt($(j).attr('id')) >= 6) {// проверка ID
        // Ваше преобразование              
    }