Einführung in die Verwendung von every() in JQuery

Anleitung zur Verwendung von every() in JQuery

Für jQuery-Objekte wird die Each-Methode einfach delegiert: Übergeben Sie das jQuery-Objekt als erster Parameter für die Each-Methode von jQuery. Mit anderen Worten: Die von jQuery bereitgestellte Each-Methode ruft die Methode nacheinander für alle Unterelemente des durch Parameter 1 bereitgestellten Objekts auf. Die Funktion Each() ist im Grunde alle Frameworks Stellen Sie eine Toolfunktion bereit, mit der Sie die Attributwerte von Objekten und Arrays durchlaufen und verarbeiten können. Sowohl jQuery- als auch jQuery-Objekte implementieren diese Methode. Bei jQuery-Objekten wird die Each-Methode einfach delegiert: Das jQuery-Objekt wird als erster Parameter an die Each-Methode von jQuery übergeben. Mit anderen Worten: Die von jQuery bereitgestellte Each-Methode ist alle Unterelemente Das durch Parameter 1 bereitgestellte Objekt wird nacheinander aufgerufen. Die vom jQuery-Objekt bereitgestellte Methode „each“ ruft nacheinander die Unterelemente in jQuery auf.

Die Wirkung jeder Funktion ist je nach Art der Parameter nicht vollständig konsistent:

1. Objekte durchqueren (mit zusätzlichen Parametern)

Die Der Code lautet wie folgt:

$.each(Object, function(p1, p2) {    this;       //这里的this指向每次遍历中Object的当前属性值
    p1; p2;     //访问附加参数}, ['参数1', '参数2']);

2. Traverse-Array (mit Anhangsparametern)

Der Code lautet wie folgt:

$.each(Array, function(p1, p2){    this;       //这里的this指向每次遍历中Array的当前元素
    p1; p2;     //访问附加参数}, ['参数1', '参数2']);

3. keine zusätzlichen Parameter)

Der Code lautet wie folgt:

$.each(Object, function(name, value) {     this;      //this指向当前属性的值
     name;      //name表示Object当前属性的名称
     value;     //value表示Object当前属性的值});

4 Array (keine zusätzlichen Parameter)

Der Code lautet wie folgt:

$.each(Array, function(i, value) {     this;      //this指向当前元素
     i;         //i表示Array当前下标
     value;     //value表示Array当前元素});

Das Folgende sind einige häufige Anwendungen der Each-Methode von jQuery

 arr = ["one", "two", "three", "four" arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 90 obj = {one: 1, two: 2, three: 3, four: 4

Die Each-Funktion in JQuery befindet sich in 1.3.2. Die Beschreibung in der offiziellen Dokumentation lautet wie folgt:

each(callback)

Führen Sie eine Funktion mit Each aus passendes Element als Kontext.

bedeutet, dass jedes Mal, wenn die übergebene Funktion ausgeführt wird, das Schlüsselwort this in der Funktion auf ein anderes DOM-Element verweist (jedes Mal ein anderes passendes Element). Darüber hinaus wird bei jeder Ausführung der Funktion ein numerischer Wert, der die Position des Elements als Ausführungsumgebung in der Menge übereinstimmender Elemente darstellt, als Parameter an die Funktion übergeben (eine Ganzzahl beginnend bei Null). Die Rückgabe von „false“ stoppt die Schleife (genau wie die Verwendung von „break“ in einer normalen Schleife). Gibt „true“ zurück, um zur nächsten Schleife zu springen (genau wie die Verwendung von „continue“ in einer normalen Schleife).

Der folgende Rückruf ist die Rückruffunktion, die die Operation angibt, die beim Durchlaufen der Elemente ausgeführt werden soll. Beginnen wir unten mit einem einfachen Beispiel:
Iterieren Sie über zwei Bilder und legen Sie deren SRC-Attribute fest. Hinweis: Hier bezieht sich dies auf das DOM-Objekt und nicht auf das jQuery-Objekt.

<img></img/>$("img").each(function(i){ 
this.src = "test" + i + ".jpg"; 
}); 

结果:[ <img src="test0.jpg" />, <img src="test1.jpg" /> ]

Natürlich erlaubt JQuery beim Durchlaufen von Elementen benutzerdefinierte Popups. Bitte sehen Sie sich den Beispielcode an: Sie können „return“ verwenden. um im Voraus aus der every()-Schleife auszubrechen.
HTML-Code:

Der Code lautet wie folgt:

<button>Change colors</button><span></span><p></p><p></p><p></p><p></p><p id="stop">Stop here</p><p></p><p></p><p></p>

jQuery-Code :

Der Code lautet wie folgt:

$("button").click(function(){
    $("p").each(function(index, domEle){
        $(domEle).css("backgroundColor", "wheat");        if ($(this).is("#stop")) {
            $("span").text("在p块为#" + index + "的地方停止。");            return false;
        }
    })
}

Oder schreiben Sie so :

Der Code lautet wie folgt:

$("button").click(function(){
    $("p").each(function(index){
        $(this).css("backgroundColor","wheat");        if($(this).is("#stop")){
            $("span").text("在p块为#"+index+"的地方停止。");            return false;
        }
    })
}

Abbildung:

each()-Methode gibt eine Funktion an, die für jedes übereinstimmende Element ausgeführt werden soll.

Tipp: Die Rückgabe von false kann verwendet werden, um die Schleife vorzeitig zu stoppen.
Syntax
$(selector).each(function(index,element)) Parameterbeschreibung
function(index,element) Erforderlich. Gibt die Funktion an, die für jedes übereinstimmende Element ausgeführt werden soll.
•index – die Indexposition des Selektors
•element – ​​das aktuelle Element (Sie können auch den „this“-Selektor verwenden

Beispiel
Geben Sie den Text jedes li-Elements aus:

Der Code lautet wie folgt:

$("button").click(function(){
    $("li").each(function(){
        alert($(this).text())
    });
});

实例 
obj 对象不是数组 
该方法同1的最大区别是：fn方法会被逐次不考虑返回值的进行进行。换句话说，obj对象的所有属性都会被fn方法进行调用，即使fn函数返回false。调用传入的参数同1类似。 

代码如下:

jQuery.each = function(obj, fn, args){    if (args) {        if (obj.length == undefined) {            for (var i in obj)
                fn.apply(obj, args);
        } else {            for (var i = 0, ol = obj.length; i < ol; i++) {                if (fn.apply(obj, args) === false)                    break;
            }
        }
    } else {        if (obj.length == undefined) {            for (var i in obj)
                fn.call(obj, i, obj);
        } else {            for (var i = 0, ol = obj.length, val = obj[0]; i < ol && fn.call(val, i, val) !== false; val = obj[++i]) {
            }
        }
    }    return obj;
}

 

需要特别注意的是each方法中fn的具体调用方法并不是采用简单的fn(i,val)或fn(args),而是采用了fn.call(val,i,val)或fn.apply(obj.args)的形式，这意味着，在你自己的fn的实现中，可以直接采用this指针引用数组或是对象的子元素。 

那怎么跳出each呢 
jquery再遍历选定的对象时候用each比较方便。有种应用是找到里面符合条件的对象后，要跳出这个循环。
javascript的跳出循环一般用break. 
同事遇到这个问题，下意识 的用了break，想跳出这个循环。结果报错 
SyntaxError: unlabeled break must be inside loop or switch 
经查，应该用一个 
在回调函数里return false即可，大多数jq的方法都是如此的 

代码如下:

返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。 
返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。 

 

Das obige ist der detaillierte Inhalt vonEinführung in die Verwendung von every() in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!