Question

我正在尝试将类'animated fadeInDown'添加到h1的子节点中，以便字母从顶部单独淡入而不是一次性完成。我不能手动键入这些类的原因是因为我使用的是fonts.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>

使用:lt()

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

Answer 2

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 3

您可以使用.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 4

请参阅this Fiddle以红色突出显示letters的前5个孩子。

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

使用addClass向子子节点添加类

4 个答案: