我有类似的 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 实现此功能?
最佳答案
您可以使用以下代码
► 方法 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()
关于jquery - 我们如何使用 jquery 将类添加到第一个 div ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36492582/