Heim > Web-Frontend > js-Tutorial > Detaillierte Erläuterung der Anwendungsbeispiele für die Funktion jQuery.addBack()

Detaillierte Erläuterung der Anwendungsbeispiele für die Funktion jQuery.addBack()

巴扎黑
Freigeben: 2017-07-08 13:10:22
Original
2184 Leute haben es durchsucht

Die Funktion addBack() wird verwendet, um das zuvor übereinstimmende Element zum aktuell übereinstimmenden Element hinzuzufügen und es in Form eines neuen jQuery-Objekts zurückzugeben.

Das aktuelle jQuery-Objekt kann durch Aufrufen einer bestimmten Methode anderer jQuery-Objekte erstellt werden. Mit dieser Funktion wird ein neues jQuery-Objekt zurückgegeben, das alle Übereinstimmungen zwischen dem aktuellen jQuery-Objekt und dem jQuery-Objekt enthält, das es zuvor erstellt hat. Element.

Sie können Selektoren auch verwenden, um den Umfang des Hinzufügens weiter einzuschränken und nur Elemente hinzuzufügen, die mit dem angegebenen Selektor im vorherigen jQuery-Objekt übereinstimmen.

Diese Funktion gehört zum jQuery-Objekt (Instanz).

Syntax

jQuery 1.8 hat diese Funktion hinzugefügt. Die Funktion andSelf() ist ein Alias ​​für diese Funktion (die Funktion andSelf() ist ab 1.8 veraltet).

jQueryObject.addBack( [ selector ] )

Parameter

Parameter

Beschreibung

selector Optional/StringSelectorString durch Typ angegeben.

Wenn der Selektorparameter weggelassen wird, werden alle passenden Elemente des vorherigen jQuery-Objekts hinzugefügt.

Rückgabewert

addBack()Der Rückgabewert der Funktion ist vom Typ jQuery und gibt ein neues jQuery-Objekt zurück, das alle übereinstimmenden Elemente des aktuellen jQuery-Objekts enthält und Erstellt die Elemente, die dem angegebenen Selektor entsprechen, unter den übereinstimmenden Elementen des jQuery-Objekts des aktuellen jQuery-Objekts.

Wenn kein passendes Element vorhanden ist, wird ein leeres jQuery-Objekt zurückgegeben.

Ab jQuery 1.8 ist die Funktion andSelf() ein Alias ​​dieser Funktion.

Details: Wenn ein jQuery-Objekt erstellt wird, gibt es ein internes Attribut (prevObject), das einen Verweis auf das jQuery-Objekt speichert, das es erstellt hat. Wenn die Funktion addBack() aufgerufen wird, werden die aktuelle jQuery und das jQuery-Objekt, das sie erstellt hat, über die Funktion add() verbunden und ein neues jQuery-Objekt zurückgegeben.

Beispiel und Beschreibung

Nehmen Sie den folgenden HTML-Code als Beispiel:

<p id="n1">
    <span id="n2">
        <span id="n3">A</span>
    </span>
    <label id="n4">B</label>
    <span id="n5">
        <span id="n6">C</span>
    </span>
    <strong id="n7" class="active">D</strong>
    <span id="n8" class="active">E</span>
</p>
<p id="n9">
    <span id="n10"></span>
    <label id="n11"></label>
    <span id="n12" class="active"></span>
</p>
Nach dem Login kopieren

Der folgende jQuery-Beispielcode wird verwendet, um die spezifische Verwendung von addBack() zu demonstrieren. Funktion:

//返回jQuery对象所有匹配元素的标识信息数组
//每个元素形如:#id
function getTagsInfo($doms){
    return $doms.map(function(){
        return "#" + this.id;
    }).get();
}
//匹配所有的p元素
var $p = $("p");
//选取所有p元素的后代label元素
var $label = $p.find("label");
//由于jQuery对象$label是通过$p的特定方法创建,使用addBack()将返回一个新的jQuery对象
//该对象所匹配的元素是$p和$label两者的匹配元素之和
var $pAndLabel = $label.addBack();
document.writeln( getTagsInfo( $pAndLabel ) ); // #n1,#n4,#n9,#n11
// 所有包含类名"active"的元素的上一个紧邻的同辈元素(#)
// 再加上所有包含类名"active"的元素中的span元素
var $elements =  $(".active").prev().addBack("span");
document.writeln( getTagsInfo( $elements ) ); // #n5,#n7,#n8,#n11,#n12
//addBack()之前有3个jQuery对象:
//第1个:$("p")
//第2个:$("p").find("strong")
//第3个:$("p").find("strong").siblings(".active")
//调用addBack()的是第3个对象,创建该对象的是第2个对象
//因此addBack()返回包含第3个对象和第2个对象的匹配元素之和的jQuery对象
var $matches = $("p").find("strong").siblings(".active").addBack();
document.writeln( getTagsInfo( $matches ) ); // #n7,#n8
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Anwendungsbeispiele für die Funktion jQuery.addBack(). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage