directory
First, JS traversal way
JQuery traversal
1. JQuery object each(callback)
2. $.each(object, [callback])
3. for.. Method of
This is the 8th day of my participation in Gwen Challenge.
Hello, I’m Grey Ape! A super bug writing program ape!
The jQuery Framework series has covered a lot of topics, from the basics of the jQuery framework, to case studies, and now advanced steps. Not only did I learn a lot by myself, but I also helped many needy friends.
Today I will continue to share with you some common methods for traversing element tag bodies in jQuery advanced development.
Let’s explain it in the form of a case. Suppose we need to traverse the li tag of ul label as follows:
The < body > < ul id = "city" > < li > Beijing < / li > < li > Shanghai < / li > < li > tianjin < / li > < li > chongqing < / li > < / ul > < / body >Copy the code
First, JS traversal way
First of all, the first kind: traversal using JS objects
Using the method of JS object traversal and our common for loop traversal is the same idea to solve the method, first we should get the need to traverse the element label, and then use the for loop method to traverse the existing label: the following to an example to explain.
Walk through four LI tags, and pop up the contents, if the label body content is “Shanghai”, do not pop up!
$(function (message) {var citys = $("# citys "); var citys = $("# citys "); i < citys.length; I++) {/ / cycle content determine if (= = "Shanghai" citys [I] innerHTML) {/ / break; continue; Alert (I + citys[I].innerhtml); }});Copy the codeJQuery traversal
1. JQuery object each(callback)
To use this method, you need to implement function() in each(), which may or may not be assigned parameters.
First let’s look at the non-parametric method, which can only be used to get elements, not to show the current number of elements.
As follows:
$(function (message) {var citys = $("# citys "); $("# citys ") citys.each(function () { // alert(this.innerHTML); alert($(this).html()); }); });Copy the codeWhere this stands for each element object in the collection
The second way is to assign arguments to function() :
The jquery object. Each (function (index, element) {});
* index: Is the index of the element in the collection
* Element: Each element object in the collection
In this way, you can call back the return value of the function, such as to end the loop or to end the whole loop, but instead of using break,
Return true/false is used here
* false: If the current function returns false, the loop is broken.
* true: If the current function returns true, the loop ends and the next loop continues (continue)
Example code:
$citys = $("# citys ") $citys = $("# citys" Citys. Each (function (index,element) {if (" Shanghai "== $(element).html()){return true; // alert(index + ":" + element.innerhtml); / / jQuery way s alert (index + ":" + $(element). The text ()); }); });Copy the code2. $.each(object, [callback])
Using this method is similar to the above method, except instead of starting with a jQuery object, the jQuery object is placed inside each(), but the implementation remains the same.
As follows:
Function (message) {var citys = $("# citys ") {$.each() = $.each(citys, function () { alert($(this).html()); }); });Copy the code3. for.. Method of
This approach is provided after jquery 3.0
The syntax is: for(element object of container object)
Insert the li tag element from ul tag as follows:
$(function (message) {var citys = $("# citys ") {for (Li of citys){ alert($(li).html()) } });Copy the codeFinally, attach the complete source code for the above four implementations.
<! 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) Var citys = $("# citys ") var citys = $("# citys ") for (var I = 0; i < citys.length; I++) {/ / cycle content determine if (= = "Shanghai" citys [I] innerHTML) {/ / break; continue; Alert (I + citys[I].innerhtml); Citys. each(function () {// alert(this.innerhtml); // alert(this.innerhtml); alert($(this).html()); }); Citys. Each (function (index,element) {if (" Shanghai "== $(element).html()){return true; } // alert(index + ":" + element.innerhtml); / / jQuery way s alert (index + ":" + $(element). The text ()); }); * / / / using the $. The each () method / * $. Each (citys, function () {alert ($(this). The HTML ()); }); * / / / using the for - of the way / * for li of citys) {alert ($(li), HTML ())} * /}); < / script > < / head > < body > < ul id = "city" > < li > Beijing < / li > < li > Shanghai < / li > < li > tianjin < / li > < li > chongqing < / li > < / ul > < / body > < / HTML >Copy the codeIf you have any questions, please leave them in the comments section!
I’m grey Ape! See you next time!
