jquery - 我们如何使用 jquery 将类添加到第一个 div ？

Question

我有类似的 HTML

<div class="main">
  <div class="sub"></div>
  <div class="sub"></div>
  <div class="sub"></div>
</div>
<div class="main">
  <div class="sub"></div>
  <div class="sub"></div>
  <div class="sub"></div>
</div>

我想向所有具有 sub 类和父 main 类的第一个 div 添加一个类。 IE;我想要像这样的 HTML

<div class="main">
  <div class="sub newclass"></div>
  <div class="sub"></div>
  <div class="sub"></div>
</div>

<div class="main">
  <div class="sub newclass"></div>
  <div class="sub"></div>
  <div class="sub"></div>
</div>

如何使用 jquery 实现此功能？

Answer 1

您可以使用以下代码

► 方法 1

$('.main').each(function(){
    $(this).find('.sub').first().addClass('newclass');
});

工作演示

$('.main').each(function(){
    $(this).find('.sub').first().addClass('newclass');
});

.newclass{
  color:red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <div class="sub">1</div>
  <div class="sub">2</div>
  <div class="sub">3</div>
 </div>
<div class="main">
  <div class="sub">1</div>
  <div class="sub">2</div>
  <div class="sub">3</div>
 </div>
<div class="main">
  <div class="sub">1</div>
  <div class="sub">2</div>
  <div class="sub">3</div>
 </div>
<div class="main">
  <div class="sub">1</div>
  <div class="sub">2</div>
  <div class="sub">3</div>
 </div><div class="main">
  <div class="sub">1</div>
  <div class="sub">2</div>
  <div class="sub">3</div>
 </div>

► 方法 2

$('.main').each(function(){
    $(this).find('.sub').eq(0).addClass('newclass');
});

工作演示

$('.main').each(function(){
    $(this).find('.sub').eq(0).addClass('newclass');
});

.newclass{
  color:red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <div class="sub">1</div>
  <div class="sub">2</div>
  <div class="sub">3</div>
</div>
<div class="main">
  <div class="sub">1</div>
  <div class="sub">2</div>
  <div class="sub">3</div>
</div>

► 方法3

$('.main').each(function(){
    $(this).find('.sub:eq(0)').addClass('newclass');
});

工作演示

$('.main').each(function(){
    $(this).find('.sub:eq(0)').addClass('newclass');
});

.newclass {
  color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <div class="sub">1</div>
  <div class="sub">2</div>
  <div class="sub">3</div>
</div>
<div class="main">
  <div class="sub">1</div>
  <div class="sub">2</div>
  <div class="sub">3</div>
</div>

引用文献

► .first()

► .eq()

► :eq()