Enumerate all elements on the page with a specific identifier.

Question

There is a function that iterates over all elements on a page with a certain class and alternately resets styles from them:

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

But how can you make it so that only those blocks are moved that have, for example, an id attribute greater than 6 and less than 10 and only they are animated?

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

I need every 9 new items displayed on the screen to animate.
The search goes on all elements, and not only on freshly bred.
As a result, if you bring 81 elements to the screen, then this search will not reach 72-81 elements soon.
Therefore, it was decided to use unique identifiers by which to determine the newly-derived elements.
The specifics of setTimeout for me is that the animation is alternate and animates with a delay in iteration.

Accepted Answer · 2017-04-07T11:33:14

When inserting new lines, assign them a special class, which means that the element needs to be animated, then you remove this class by timeout - the animation turns on. Thus, only the last added elements will be animated.

Ps. Try to avoid using id for addressing elements for JS as well as using inline styles.

 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 · 2017-04-07T11:00:35

 each(function(i,j) // добавьте второй аргумент в цикл if (parseInt($(j).attr('id')) <= 10 && parseInt($(j).attr('id')) >= 6) {// проверка ID // Ваше преобразование }

The second argument is equal to this it makes no sense to add
"attribute id is greater than 6 and less than 10", well, check for the value of id, as you wrote, or did I misunderstand?

Enumerate all elements on the page with a specific identifier.

2 answers 2

More articles: