Добавление классов к дочерям с помощью addClass

Question

Я пытаюсь добавить анимированный fadeInDown класса к дочерним элементам h1, так что буквы индивидуально затухают сверху, а не все делают это сразу. Причина, по которой я не могу просто напечатать эти классы вручную, потому что я использую lettering.js, который распадается «Lorem изобр» в его составляющих, когда ДоП нагрузки

<h1 id = "letters"> 
    <span class="char1">l</span> 
    <span class="char2">o</span> 
    <span class="char3">r</span> 
    <span class="char4">e</span> 
    <span class="char5">m</span> 
    <span class="char6"> </span> 
    <span class="char7">i</span> 
    <span class="char8">p</span> 
    <span class="char9">s</span> 
</h1> 

Мой JQuery:.

$(document).ready(function() { 
    $("#letters").children().addClass('animated fadeInDown'); 
}); 

В самом деле, в идеале , Я бы хотел, чтобы первые 5 использовали этот класс, а не все из них.

Answer 1

var time = 500; 
 
$(document).ready(function() { 
 
    $("#letters").children().each(function(i) { 
 
    if (i <5) { 
 
    $(this).delay(time).queue(function() { $(this).addClass('animated fadeInDown').dequeue(); }); 
 
    time += 500; 
 
     } 
 
    i++; 
 
    }); 
 
});

.animated { 
 
    font-size:50px; 
 
    color:red; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1 id="letters"> 
 
     <span class="char1">l</span> 
 
     <span class="char2">o</span> 
 
     <span class="char3">r</span> 
 
     <span class="char4">e</span> 
 
     <span class="char5">m</span> 
 
     <span class="char6"> </span> 
 
     <span class="char7">i</span> 
 
     <span class="char8">p</span> 
 
     <span class="char9">s</span> 
 
    </h1>

Answer 2

Вы можете использовать .each() и добавить условие на основе индекса элементов:

$(document).ready(function() { 
    $("#letters").children().each(function(i){ 
    if(i < 5) $(this).addClass('animated fadeInDown'); 
    }) 
}); 

Demo

Вы также можете сделать это с помощью переключателя lt , как @guradio в своем комментарии:

$("#letters").find('span:lt(5)').addClass('animated fadeInDown'); 

Answer 3

$(document).ready(function() { 
 
    $("#letters").find('span:lt(5)').addClass('animated fadeInDown'); 
 
});

.animated{color:red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1 id = "letters"> 
 
    <span class="char1">l</span> 
 
    <span class="char2">o</span> 
 
    <span class="char3">r</span> 
 
    <span class="char4">e</span> 
 
    <span class="char5">m</span> 
 
    <span class="char6"> </span> 
 
    <span class="char7">i</span> 
 
    <span class="char8">p</span> 
 
    <span class="char9">s</span> 
 
</h1>

1. использование :lt()

Описание: Выбрать все элементы с индексом меньше, чем показатель в пределах согласованного установлена ​​

Answer 4

См. this Fiddle hightlighting in red, первые 5 детей letters.

$(document).ready(function() { 
    $("#letters").children().first().addClass('animated fadeInDown').nextUntil(".char6").addClass('animated fadeInDown'); 
});