jQuery 遍历 - each() 方法
实例
输出每个 li 元素的文本:
$("button").click(function(){ $("li").each(function(){ alert($(this).text()) }); });
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("li").each(function(){
alert($(this).text())
});
});
});
</script>
</head>
<body>
<button>输出每个列表项的值</button>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>
</body>
</html>
定义和用法
each() 方法规定为每个匹配元素规定运行的函数。
提示:返回 false 可用于及早停止循环。
语法
$(selector).each(function(index,element))
参数 | 描述 |
---|---|
function(index,element) | 必需。为每个匹配元素规定运行的函数。
|
jQuery 遍历 - find() 方法
实例
搜索所有段落中的后代 span 元素,并将其颜色设置为红色:
$("p").find("span")
.css('color','red');
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
</head>
<body>
<p><span>Hello</span>, how are you?</p>
<p>Me? I'm <span>good</span>.</p>
<script>
$("p").find("span").css('color','red');
</script>
</body>
</html>
定义和用法
find() 方法获得当前元素集合中每个元素的后代,通过选择器、jQuery 对象或元素来筛选。
语法
.find(selector)
参数 | 描述 |
---|---|
selector | 字符串值,包含供匹配当前元素集合的选择器表达式。 |
详细说明
如果给定一个表示 DOM 元素集合的 jQuery 对象,.find() 方法允许我们在 DOM 树中搜索这些元素的后代,并用匹配元素来构造一个新的 jQuery 对象。.find() 与 .children() 方法类似,不同的是后者仅沿着 DOM 树向下遍历单一层级。
.find() 方法第一个明显特征是,其接受的选择器表达式与我们向 $() 函数传递的表达式的类型相同。将通过测试这些元素是否匹配该表达式来对元素进行过滤。
请思考下面这个简单的嵌套列表:
<ul class="level-1"> <li class="item-i">I</li> <li class="item-ii">II <ul class="level-2"> <li class="item-a">A</li> <li class="item-b">B <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </li> <li class="item-c">C</li> </ul> </li> <li class="item-iii">III</li> </ul>
我们将从列表 II 开始来查找其中的列表项:
$('li.item-ii').find('li').css('background-color', 'red');
这次调研的结果是,项目 A、B、1、2、3 以及 C 均被设置了红色背景。即使项目 II 匹配选择器表达式,它也不会被包含在结果中;只会对后代进行匹配。
与其他的树遍历方法不同,选择器表达式对于 .find() 是必需的参数。如果我们需要实现对所有后代元素的取回,可以传递通配选择器 '*'。
选择器 context 是由 .find() 方法实现的;因此,$('li.item-ii').find('li') 等价于 $('li', 'li.item-ii')。
对于 jQuery 1.6,我们还可以使用给定的 jQuery 集合或元素来进行筛选。还是上面的嵌套列表,我们首先这样写:
var $allListElements = $('li');
然后将这个 jQuery 对象传递给 find 方法:
$('li.item-ii').find( $allListElements )
;
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
</head>
<body>
<ul class="level-1">
<li class="item-i">I</li>
<li class="item-ii">II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
<script>
var $allListElements = $('li');
$('li.item-ii').find( $allListElements ).css('background-color', 'red');
</script>
</body>
</html>
上面的代码会返回一个 jQuery 集合,其中包含属于列表 II 后代的列表元素。
类似地,也可以传递一个元素:
var item1 = $('li.item-1')[0];
$('li.item-ii').find( item1 )
.css('background-color', 'red');
<body>
<ul class="level-1">
<li class="item-i">I</li>
<li class="item-ii">II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
<script>
var item1 = $('li.item-1')[0];
$('li.item-ii').find( item1 ).css('background-color', 'red');
</script>
</body>
</html>
这次调用的结果是项目 1 被设置为红色背景。
jQuery 遍历 - next() 方法
实例
查找每个段落的下一个同胞元素,仅选中类名为 "selected" 的段落:
$("p").next(".selected")
.css("background", "yellow");
定义和用法
next() 获得匹配元素集合中每个元素紧邻的同胞元素。如果提供选择器,则取回匹配该选择器的下一个同胞元素。
语法
.next(selector)
参数 | 描述 |
---|---|
selector | 字符串值,包含用于匹配元素的选择器表达式。 |
详细说明
如果给定一个表示 DOM 元素集合的 jQuery 对象,.next() 方法允许我们搜索 DOM 树中的元素紧跟的同胞元素,并用匹配元素构造新的 jQuery 对象。
该方法接受可选的选择器表达式,类型与我传递到 $() 函数中的相同。如果紧跟的同胞元素匹配该选择器,则会留在新构造的 jQuery 对象中;否则会将之排除。
请思考下面这个带有简单列表的页面:
<ul> <li>list item 1</li> <li>list item 2</li> <li class="third-item">list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul>
如果我们从项目三开始,则能够找到其后出现的元素:
$('li.third-item').next()
.css('background-color', 'red');
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
</head>
<body>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li class="third-item">list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<script>
$('li.third-item').next().css('background-color', 'red');
</script>
</body>
</html>
这次调用的结果是,项目 4 被设置为红色背景。由于我们没有应用选择器表达式,紧跟的这个元素很明确地被包括为对象的一部分。如果我们已经应用了选择器,在包含它之前会检测是否匹配。
jQuery 遍历 - parent() 方法
定义和用法
parent() 获得当前匹配元素集合中每个元素的父元素,使用选择器进行筛选是可选的。
.parent(selector)
参数 | 描述 |
---|---|
selector | 字符串值,包含用于匹配元素的选择器表达式。 |
详细说明
如果给定一个表示 DOM 元素集合的 jQuery 对象,.parent() 方法允许我们在 DOM 树中搜索这些元素的父元素,并用匹配元素构造一个新的 jQuery 对象。.parents() 和 .parent() 方法类似,不同的是后者沿 DOM 树向上遍历单一层级。
该方法接受可选的选择器表达式,与我们向 $() 函数中传递的参数类型相同。如果应用这个选择器,则将通过检测元素是否匹配该选择器对元素进行筛选。
请思考这个带有基本的嵌套列表的页面:
<ul class="level-1"> <li class="item-i">I</li> <li class="item-ii">II <ul class="level-2"> <li class="item-a">A</li> <li class="item-b">B <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </li> <li class="item-c">C</li> </ul> </li> <li class="item-iii">III</li> </ul>
如果我们从项目 A 开始,则可找到其父元素:
$('li.item-a').parent()
.css('background-color', 'red');
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
</head>
<body>
<ul class="level-1">
<li class="item-i">I</li>
<li class="item-ii">II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
<script>
$('li.item-a').parent().css('background-color', 'red');
</script>
</body>
</html>
此次调用的结果是,为 level-2 列表设置红色背景。由于我们未应用选择器表达式,父元素很自然地成为了对象的一部分。如果已应用选择器,则会在包含元素之前,检测元素是否匹配选择器。
jQuery 遍历 - last() 方法
定义和用法
last() 将匹配元素集合缩减为集合中的最后一个元素。
语法
.last()
详细说明
如果给定一个表示 DOM 元素集合的 jQuery 对象,.last() 方法会用最后一个匹配元素构造一个新的 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').last()
.css('background-color', 'red');
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
</head>
<body>
<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>
<script>
$('li').last().css('background-color', 'red');
</script>
</body>
</html>
这次调用的结果是,最后一个项目被设置为红色背景。
#更改HTML里面的内容
//$("[name = 'fg_n'] li a").each(function(){
// //console.info(this);
// var CurStringLen = $(this).html().length;
//
// if(CurStringLen > 19){
// var NewString = $(this).html().substr(0, 19);
// $(this).html(NewString + '...');
// }
//});
以上部分内容来自互联网,在此感谢!@