欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

jQuery遍历 —— find & each & children

程序员文章站 2022-07-12 23:41:39
...

Jquery是开发人员的必备课程，做程序的，如果不会点Js，你就会觉得道路崎岖不平，步履艰难啊~~~

接下来，将对Jquery的遍历做一个系统的分析：

<html>
<div class="container">
    <ul>
    	<span> jQuery 遍历函数包括了用于筛选、查找和串联元素的方法</span>
        <li>Hello,my name is Tom!</li>
        <li class="error">This is my friend Jack,I'll introduce to you!</li>
		<li>
			<ul>
				<li>He likes balls.</li>
				<li class="error">He likes music.
					<input type="button" class="play_muc" value="播放音乐"/>
					<span> jQuery 遍历函数包括了用于筛选、查找和串联元素的方法</span>
				</li>
				<span> jQuery 遍历函数包括了用于筛选、查找和串联元素的方法</span>
				<li>He is a lazzy boy ....</li>
			</ul>
		</li>
		<li>Now,for me, I like music too.</li>
		<li class="error">I don't like eat too much!!</li>
		<li>
			<a href="#" class="surprice">点我有惊喜哦。。。</a>
		</li>
    </ul>
</div>
</html>

 这是一段在接下来的例子中一直会用到的代码。

1.find() 方法

find在Jquery的使用中非常频繁，所有，我要第一个消灭它。

find() : 获取当前元素集合中每个元素的后代

语法： .find(selector)   

select  ： 是字符串值，包含供匹配当前元素集合的选择器表达式。

find不会单独使用，前面必有一个DOM元素集合的Jquery对象， .find()方法允许我们在DOM数中搜索这些元素的后代，并用匹配元素来构造一个新的Jquery对象。.find() 和 .children() 方法类似，不同的是后者仅沿着DOM树向下遍历单一层级。

eg:

$(".surprice").click(function(){
    $("ul").parent().find("li").css('color','red');
});
//所有的ul下面的li标签里面的字体都会变成红色，不管li里面嵌套了什么

 2.each()方法

以每一个匹配的元素作为上下文来执行一个函数。

意味着，每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素(每次都是一个不同的匹配元素)。而且，在每次执行函数时，都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数(从零开始的整数)。返回'false' 将停止循环(就像在普通的循环中使用“break”)。返回'true'跳至下一个循环(就像在普通的循环中使用‘continue’)。

语法： 

$(selector).each(funciton(index,element));

function(index,element) : 必需。为每个匹配元素规定运行的函数

index : 选择器的index位置

element : 当前的元素(也可使用“this”选择器)

eg:

$(".surprice").click(function(){
	$("ul li").each(function(i,item){
		var class_name = $(item).attr("class");
		if(class_name == "error"){
			$(this).css('color','red');		
                        //等同于  $(item).css('color','red');
		}
	});
});
//所有class值为"error"的字体都会变成红色

 3.children()方法

取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合通过可选的表达式来过滤所匹配的子元素，注意： children() 只考虑子元素而不考虑所有后代元素。

语法：

 .children(selector);

selector : 字符串值，包含匹配元素的选择器表达式。

如果给定表示DOM元素集合的Jquery对象， .children() 允许我们检索DOM树中的这些元素，并用匹配元素构造新的Jquery对象。 

eg:

$(".surprice").click(function(){
	$("ul").children("span").css("color",'red');
});
//根据上面代码，只有直接跟在ul下的span会发生变化， 而存在ul下的li下的span没有发生变化，也就是第一个和第三个span发生了变化。

 

相关标签： jquery遍历 find each children

上一篇： jQuery中each的用法之退出循环和结束本次循环

下一篇： jQuery 跳出each循环

推荐阅读