Abstract:Share some common methods for traversal of element tag body in advanced development of jQuery.

Four Ways to Implement “For Loop” with jQuery Framework “, originally written by Grey Ape.

Today, I want to share with you some common methods for traversal of element tag bodies in advanced development of jQuery.

Let’s take the form of an example, if we need to traverse the li tag in the ul tag as follows:

The < body > < ul id = "city" > < li > Beijing < / li > < li > Shanghai < / li > < li > tianjin < / li > < li > chongqing < / li > < / ul > < / body >

1. JS traversal mode

The first is to use JS objects for traversal.

The method of traversing JS objects is the same as that of traversing for loops. First, we should get the element tags that need to be traversed, and then we should use the method of for loop to traverse the existing tags.

Iterate through four li tags and pop up the contents of them. If the tag body content is “Shanghai”, it will not pop up!

$(function (message) {var citys = $("#city Li "); $("#city Li "); $("#city Li "); i < citys.length; I++) {/ / cycle content determine if (= = "Shanghai" citys [I] innerHTML) {/ / break; continue; } alert(I + citys[I]. InnerHTML);} alert(I + citys[I]. }});

2. How jQuery traverses

1. Each (callback) jQuery object

To use this method, you need to implement the function() method in each(), which may or may not be assigned,

First, let’s look at a method that does not assign parameters. This method can only be used to get the element, not to show the current element. As follows:

$(function (message) {var citys = $("#city Li "); $(function (message) {$("#city Li ") citys.each(function () { // alert(this.innerHTML); alert($(this).html()); }); });

This represents each element object in the collection

The second is to give arguments to function() :

The jquery object. Each (function (index, element) {});

* index: is the index of the element in the collection

* Element: is each element object in the collection

This way you can call back the return value of the function, such as the end of the loop or the end of the loop, but instead of using break,

Here we use return true/false

  • False: If the current function returns false, break the loop.
  • True: If the current function returns true, the loop ends and continues.

Example code:

$(function (message) {var citys = $("#city Li "); $(function (message) {$("#city Li ") Citys. each(function (index,element) {if (" Shanghai "== $(element).html()){return true; } // alert(index + ":" + element.innerhtml); / / jQuery way s alert (index + ":" + $(element). The text ()); }); });

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

Using this method is similar to the above method, except instead of starting with a jQuery object, it starts with a $sign. The jQuery object is placed inside each(), but the implementation is the same as above. As follows:

$(function (message) {var citys = $("#city Li "); $. Each (); function () { alert($(this).html()); }); });

3. for.. Method of

This approach is available since jQuery 3.0

The syntax format is: for(element object of container object)

Similarly, remove the li tag element from ul tag. The code is as follows:

$(function (message) {var citys = $("#city Li "); $(function (message) {$("#city Li "); alert($(li).html()) } });

Finally attached to the above four kinds of implementation of complete source code.

<! DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src=".. /js/ jquery-3.3.3.min.js "type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function) (message) {var citys = $("#city Li "); // For (var I = 0; // For (var I = 0; i < citys.length; I++) {/ / cycle content determine if (= = "Shanghai" citys [I] innerHTML) {/ / break; continue; } alert(I + citys[I]. InnerHTML);} alert(I + citys[I]. /* citys.each(function () {// alert(this.innerhtml); alert($(this).html()); }); /* Citys. each(function (index,element) {if (" Shanghai "== $(element).html()){return true; } // js mode // 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 >

Click on the attention, the first time to understand Huawei cloud fresh technology ~