jquery 怎么获取span下第一个i标签
<span class='label'><i></i><i></i></span>
<span class='label'><i></i><i></i></span>
<span class='label'><i></i><i></i></span>
<span class='label'><i></i><i></i></span>
<span class='label'><i></i><i></i></span>
我通过 $('.label') 可以获取全部我要的 span,怎么通过这些 span 获取下面第一个 i 标签,并且 item.addClass('aa')
谢谢! 展开
有两种方法可以实现获取span下第一个i标签:
1、使用css选择器: first-child 或nth-child(1),具体代码为:$("span.label i:first-child") 或 $("span.label i:nth-child(1)")
2、使用遍历方法:first()、eq()等,具体代码为:
$("span.label").each(function() {
$(this).find("i:eq(0)") // 或者$(this).find("i").first()
});
下面进行实例演示:为所有span的第一个i标签的元素都添加红色样式:
1、新建一个HTML文件,为了演示需要假设如下的HTML结构:
<div id="test">
<span class='label'><i>1-1</i> <i>1-2</i></span><br>
<span class='label'><i>2-1</i> <i>2-2</i></span><br>
<span class='label'><i>3-1</i> <i>3-2</i></span>
</div>
<input type="button" id="btn" value="设置">
2、在上面新建文件的开头部分添加如下jquery代码:主要逻辑为在点击按钮时相应一个操作,即获取span下第一个i标签(下面注释部分给出了4种方法都是可行的,可以根据需要进行选择)。为了演示效果,使用addClass()函数为获取到的span下第一个i标签添加红色的样式。
<script>
$(function(){
$("#btn").click(function() { // 点击按钮就相应下面的操作
// $("span.label i:first-child").addClass('red'); // 方法1,使用first-child选择器
// $("span.label i:nth-child(1)").addClass('red'); // 方法2,使用nth-child(1)选择器
$("span.label").each(function() {
// $(this).find("i:eq(0)").addClass('red'); // 方法3,遍历后使用eq()方法
$(this).find("i").first().addClass('red'); // 方法4,遍历后使用first()方法
});
});
});
</script>
3、保存文件,使用浏览器打开,点击按钮后效果如下:
$('span.label i:first').addClass('aa')
不是所有的span,是class为label的span
$('span.label i:first').addClass('aa')
$('span.label i:first').addClass('aa')
这样就行。
你们自己试了吗?太水了吧,这么简单的问题,还都是一样的回答,无力吐槽你们了
你试了么? eq是jquery的筛选器 你懂啥? 不懂就别BB 采纳的:first 只能是第一个懂么? 而eq(这里下标从0开始可以筛选任意位置) 自己研究明白了 不然别说出这种贻笑大方的话来 谢谢