jQuery遍历的常用方法：
最常用的四个方法
find(): 在所有的后代中查找
children(): 仅在子元素中查找
filter(): 在集合中查找到一部分
parent(): 获取父级(只有一个)
同级兄弟
siblings(): 所有兄弟
next(): 后一个兄弟
nextAll(): 后面的所有兄弟
prev(): 前一个兄弟
prevAll(): 前面所有兄弟
常用的快捷方式
$().first(): 选择集合中的第一个
$().last(): 选择集合中的最后一个
$().eq(n): 选择指定索引的对象(0开始)
$().not(selector): 去掉not()中的对象
$().gt(): 大于指定索引的对象
$().lt(): 小于指定索引的对象
收藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery遍历</title>
</head>
<body>
<ul id="list">
<li>item1</li>
<li>item2</li>
<li>item3
<ul>
<li>sub_item1</li>
<li>sub_item2</li>
<li>sub_item3</li>
</ul>
</li>
<li>item4</li>
<li>item5</li>
</ul>
<script src="static/js/jquery-3.4.1.js"></script>
<script>
var list=$('#list');
// .find()：获取所有层级，其实就是后代元素
// list.find('li').css('color','red');
//.children()：只获取子元素，第一级的Li
// list.children('li').css('color','green');
//.filter(): 过滤元素
// list.children('li').filter(':gt(1)').css('background-color','yellow');
//获取第三个Li
var li3=$('li').eq(2);
// li3.next().css('background-color','yellow');
// li3.nextAll().css('background-color','yellow');
// li3.prev().css('background-color','yellow');
// li3.prevAll().css('background-color','yellow');
// $('li').first().css('background-color','yellow');
// $('li').eq(0).css('background-color','yellow');
// $('ul li:first-of-type').css('background-color','yellow');
// $('#list > li:first-of-type').css('background-color','yellow');
$('li').not(':eq(0)').css('background-color','blue');
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
