Abstract: shares several commonly used methods for traversing element tag bodies in jQuery advanced development.
This article is shared from HUAWEI CLOUD COMMUNITY " Inventory of four ways to implement "for loop" with jQuery framework! ", the original author: Gray Little Ape.
Today, I will continue to share with you several commonly used methods for traversing element tag bodies in jQuery advanced development.
we explain in the form of a case, if we need to traverse the li tag in the following ul tag:
<body>
<ul id="city">
<li>北京</li>
<li>上海</li>
<li>天津</li>
<li>重庆</li>
</ul>
</body>
1. The traversal method of JS
First of all, the first kind: traverse using js objects.
Using the method of js object to traverse is the same idea and solution as our usual for loop traversal. First, we should get the element label that needs to be traversed, and then use the for loop method to traverse the existing labels: Here is an example To explain.
Traverse the four li tags and pop up the content in them. If the content of the tag body is "Shanghai", it will not pop up!
$(function (message) {
// 获取到UI下的所有Li标签
var citys = $("#city li")
// 利用js中的for循环进行遍历
// 将获取到的li标签数组进行遍历
for (var i = 0; i < citys.length; i++) {
// 循环内容判断
if ("上海" == citys[i].innerHTML){
// break;
continue;
}
// 输出获取到的li标签中的内容
alert(i + citys[i].innerHTML);
}
});Second, the traversal method of JQuery
1. jQuery object.each(callback)
When using this method, you need to implement the function() method in each(). In the function() method, you can assign parameters or not.
First of all, let's look at the one that does not need to be given parameters. This method can only be used to get the element, and cannot display the current element. as follows:
$(function (message) {
// 获取到UI下的所有Li标签
var citys = $("#city li")
// 利用jQuery对象的each进行遍历
// 利用this进行遍历
citys.each(function () {
// alert(this.innerHTML);
alert($(this).html());
});
});where this means: each element object in the
The second is to assign parameters in function():
jquery object.each(function(index,element){});
* index: is the index of the element in the collection
* element: is each element object in the
In this way, you can call back the return value of the function: for example, end this loop or end the entire loop, but not using break,
Here is return true/false
- false: If the current function returns false, the loop (break) is ended.
- true: If the current function returns true, the current loop will end and the next loop will continue (continue)
Example code:
$(function (message) {
// 获取到UI下的所有Li标签
var citys = $("#city li")
// 利用jQuery对象的each进行遍历
// 利用给function赋值获取对象文本
citys.each(function (index,element) {
if ("上海" == $(element).html()){
return true; //结束本次循环
}
// js方式
// alert(index + ":" + element.innerHTML);
// jQuery方式s
alert(index + ":" + $(element).text());
});
});2. $.each(object, [callback])
Using this method is similar to the above method, except that the front is not a jQuery object, but a $ symbol. The jQuery object is placed in each(), but the implementation is still the same as the above. as follows:
$(function (message) {
// 获取到UI下的所有Li标签
var citys = $("#city li")
// 利用$.each()方法
$.each(citys, function () {
alert($(this).html());
});
});3. for..of method
This method is provided after jquery 3.0 version
syntax format of 160d3e72a441e4 is: for (element object of container object)
The same is to take out the li tag element from the ul tag, the code is as follows:
$(function (message) {
// 获取到UI下的所有Li标签
var citys = $("#city li")
// 利用for---of的方式
for (li of citys){
alert($(li).html())
}
});Finally, the complete source code of the above four implementations is attached.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function (message) {
// 获取到UI下的所有Li标签
var citys = $("#city li")
// 利用js中的for循环进行遍历
// 将获取到的li标签数组进行遍历
for (var i = 0; i < citys.length; i++) {
// 循环内容判断
if ("上海" == citys[i].innerHTML){
// break;
continue;
}
// 输出获取到的li标签中的内容
alert(i + citys[i].innerHTML);
}
// 利用jQuery对象的each进行遍历
// 利用this进行遍历
/* citys.each(function () {
// alert(this.innerHTML);
alert($(this).html());
});
*/
// 利用给function赋值获取对象文本
/*citys.each(function (index,element) {
if ("上海" == $(element).html()){
return true;
}
// js方式
// alert(index + ":" + element.innerHTML);
// jQuery方式s
alert(index + ":" + $(element).text());
});*/
// 利用$.each()方法
/* $.each(citys, function () {
alert($(this).html());
});*/
// 利用for---of的方式
/* for (li of citys){
alert($(li).html())
}*/
});
</script>
</head>
<body>
<ul id="city">
<li>北京</li>
<li>上海</li>
<li>天津</li>
<li>重庆</li>
</ul>
</body>
</html>Click to follow, and learn about Huawei Cloud's fresh technology for the first time~
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。