使用addClass向子子节点添加类

Question

我正在尝试将类'animated fadeInDown'添加到h1的子节点中,这样字母就会从顶部单独淡入而不是一次性完成.我之所以不能手动输入这些类是因为我是使用lettering.js,当doc加载时,它会将"lorem ips"分解为其成分.

<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

$(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()

描述:选择匹配集中索引小于索引的所有元素