Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "what are the ways of traversal in jQuery". Xiaobian shows you the operation process through actual cases. The operation method is simple and fast, and the practicality is strong. I hope this article "what are the ways of traversal in jQuery" can help you solve the problem.

There are several ways jQuery traverses.

We all know that the traversal of js is: for(initialization value; loop end condition; step size) For example:

for (var i = 0; i

语法： jquery对象.each(function(){});

//html js java C++ jq//实例$("button").click(function(){ $("#course li").each(function(){ alert($(this).html());//jq获取方式 alert(this[xss_clean]);//js获取方式 });});

1.2. 回调函数带参数(*可以获取到index索引，且有两种获取元素对象的方式，如下)

->语法：jquery对象.each(function(index,element){});

index:就是元素在集合中的索引

element：就是集合中的每一个元素对象

this：集合中的每一个元素对象

//实例 $("#course li").each(function (index, item) { //3.1 获取 li对象 第一种方式 this //alert(this[xss_clean]);//js获取 //alert($(this).html());//jq获取 /*3.2 获取 li对象 第二种方式 在回调函数中定义参数 index（索引）item（元素对象）*/ // alert(index+":"+item[xss_clean]); alert(index+":"+$(item).html());}

2. jQuery.each(object, [callback])

callback的返回值最后再做说明

2.1. 回调函数不带参数 (*与1.1效果类似，只能通过this来获取对象)

->语法：$.each(object,function(){});

$.each($("#course li"),function () { //alert($(this).html());//jq获取方式 alert(this[xss_clean]);//js获取方式 });

2.2. 回调函数带参数(*可以获取到index索引，与1.2效果类似，写法不同，如下)

->语法：$.each(object,function(){index,item});

index:就是元素在集合中的索引

item：就是集合中的每一个元素对象

this：集合中的每一个元素对象

$.each($("#course li"),function (index,item) { //3.1 获取 li对象 第一种方式 this // alert(this[xss_clean]);//js获取 // alert($(this).html());//jq获取 /*3.2 获取 li对象 第二种方式 在回调函数中定义参数 index（索引）item（元素对象）*/ //alert(index+":"+item[xss_clean]); alert(index+":"+$(item).html()); });

3. for…of: jquery 3.0 版本之后提供的方式(*了解)

->语法：for(元素对象 of 容器对象)

for (li of $("#course li")) { alert($(li).html()); }

4. 回调函数返回值问题（涉及第一第二）：(*补充)

true:如果当前function返回为false，则结束循环(break)。

false:如果当前function返回为true，则结束本次循环，继续下次循环(continue)

例如：

$.each($("#course li"), function (index, item) { //判断如果是java，则结束循环 if ("java" == $(item).html()) { //如果当前function返回为false，则结束循环(break)。 //如果返回为true，则结束本次循环，继续下次循环(continue) return false; } alert($(this).html());//此时前端页面只会弹出第一个值js }); $.each($("#course li"), function (index, item) { //判断如果是java，则结束循环 if ("java" == $(item).html()) { //如果当前function返回为false，则结束循环(break)。 //如果返回为true，则结束本次循环，继续下次循环(continue) return true; } alert($(this).html());//此时前端页面会依次弹出js,C++jq,不会弹出java });关于"jQuery中遍历的方式有哪些"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注行业资讯频道，小编每天都会为大家更新不同的知识点。

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.