jquery如何获取第一个或最后一个子元素
2018-08-03 · 知道合伙人互联网行家
方法如下:
获取第一个元素
$("#body").children(":first")
判断获取元素的标签
$("#body").children(":first").attr("tagName") == "STRONG"
JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及后续版本将不再支持IE6/7/8浏览器。
如果一个jQuery对象表示一个DOM元素的集合,.first()方法会构造一个新的jQuery对象,它包含了前一个集合的第一个元素。
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
$('li').first().css('background-color', 'red');
调用的结果是第一个列表项目为红色背景。
如果一个jQuery对象表示一个DOM元素的集合,.last()方法从最后一个匹配的元素中构造一个新的jQuery对象。
考虑一个页面上的一个简单的列表:
$('li').last().css('background-color', 'red');
调用的结果是最后一个列表项目为红色背景。
主要方法有两类:使用选择器或者遍历函数,并且可以混合使用。以获取id为test的div下的第一个或最后一个div子元素为例,详细说明如下:
1、使用选择器:
$("#test>div:first-child") // $("#test>div:first")
$("#test>div:last-child") // $("#test>div:last")
2、使用遍历函数:
$("#test").children().first()
$("#test").children().last()
3、混合使用
$("#test>div").first()
$("#test>div").last()
$("#test").children(":first") // $("#test").children(":first-child")
$("#test").children(":last") // $("#test").children(":last-child")
显示段落中的最后一个 span :
$("p span").last().addClass('highlight');
定义
last() 将匹配元素集合缩减为集合中的最后一个元素。
实例二
显示段落中的第一个 span :
$("p span").first().addClass('highlight');
定义
first() 将匹配元素集合缩减为集合中的第一个元素。