Why are our wallets always empty when it comes to promotion? Is it that we lack self-control, or is it that e-commerce platforms are too good at reading people’s minds and looking into the details from the technical dimension?

Abstract: This article discusses some common methods for traversing element tag body in jQuery advanced development.

This article is from Huawei Cloud community “4 Ways to Implement” for loop “with jQuery Framework! , original author: Little Grey Ape.

Today we 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 code

JQuery traversal

1. JQuery object each(callback)

To use this method, you need to implement the function() method 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 code

Where 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 code

2.$.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 code

3. 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 code

Finally, 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 code

Click to follow, the first time to learn about Huawei cloud fresh technology ~