wrap(): Füge eine angegebene HTML-Struktur außerhalb jedes passenden Elements hinzu,
wrapAll(): Füge eine angegebene HTML-Struktur außerhalb aller passenden Elemente hinzu (als Ganzes) wrap()
Die Funktion wird verwendet, um die angegebene HTML-Struktur außerhalb jedes passenden Elements einzuschließen.
Relativ zu dieser Funktion ist die Funktion unwrap(), die für das übergeordnete Element des aktuell übereinstimmenden Elements verwendet wird (nur das übergeordnete Element wird entfernt und alle seine internen Knoten bleiben erhalten). ).
Diese Funktion gehört zum <a href="http://www.php.cn/wiki/1495.html" target="_blank">jQuery<code><a href="http://www.php.cn/wiki/1495.html" target="_blank">jQuery</a>
-Objekt (Instanz).
jQueryObject.wrap( wrapper )
Parameter | Beschreibung | Der Typ||||
---|---|---|---|---|---|
wrapper |
String |
wrapper
jQuery 1.4 Neue Unterstützung: Parameter wrap()
kann eine this
-Funktion sein. durchläuft diese Funktion und führt sie basierend auf allen übereinstimmenden Elementen aus, und in der Funktion zeigt auf das entsprechende DOM-Element.
wrap()
übergibt auch einen Parameter an die Funktion, der der Index des aktuellen Elements im passenden Element ist. Der Rückgabewert der
ist der zum Umschließen verwendete Knoteninhalt (kann ein HTML-String, ein DOM-Element oder ein jQuery-Objekt sein). wrapper
Hinweis: Wenn mit mehreren Elementen übereinstimmt, wird nur das erste Element von
wrapper
wrap()
Hinweis: Wenn beispielsweise ein mehrstufiges verschachteltes Element ist, prüft den ersten Knoten jeder Verschachtelungsebene von außen nach innen. Wenn der Knoten keine untergeordneten Knoten hat oder der erste untergeordnete Knoten von kein Elementknoten ist (z. B. ein Textknoten, ein Kommentarknoten usw.), beenden Sie die Suche nach innen und hängen Sie ihn direkt an (append()). Endposition innerhalb des aktuellen Knotens) entspricht derzeit dem Element.
Rückgabewertwrap()
Der Rückgabewert der Funktion ist jQuery-Typ, gibt das aktuelle jQuery-Objekt selbst zurück
wrapper
Hinweis: Auch wenn das wrap()
-Element ein Element auf der aktuellen Seite ist, verschwindet das Element nicht von seiner ursprünglichen Position. Weil eine Kopie (Klon) des Elements verwendet, um als Wrapper zu fungieren.
Beispiel & Beschreibung Die Funktion wrap()
wird verwendet, um vor jedem passenden Element Inhalte einzufügen
<span class="tag"><p><span class="pln">段落文本1<span class="tag"><span></span></p><span class="pln"><br/><span class="tag"><p><span class="pln">段落文本2<span class="tag"><span></span></p><span class="pln"><br/><br/><span class="tag"><script<span class="pln"> <span class="atn">type<span class="pun">=<span class="atv">"text/<a href="http://www.php.cn/wiki/48.html" target="_blank">javascript</a>"<span class="tag">><span class="pln"><br/>$<span class="pun">(<span class="str">"p"<span class="pun">).<span class="pln">wrap<span class="pun">(<span class="pln"> <span class="str">'<p></p>'<span class="pln"> <span class="pun">);<span class="pln"> <br/><span class="tag"></script><span class="pln"><br/><br/><span class="com"><!--以下是jQuery代码执行后的html内容--><span class="pln"><br/><span class="tag"><p><p><span class="pln">段落文本1<span class="tag"><span></span></p></p><span class="pln"><br/><span class="tag"><p><p><span class="pln">段落文本2<span class="tag"><span></span></p></p></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
<span class="tag"><p<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n1"<span class="tag">><span class="pln"><br/> <span class="tag"><span<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n2"<span class="tag">><span class="pln">span#n2<span class="tag"></span><span class="pln"> <br/><span class="tag"></p><span class="pln"><br/><span class="tag"><p<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n3"<span class="tag">><span class="pln"><br/> <span class="tag"><input<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n4"<span class="pln"> <span class="atn">type<span class="pun">=<span class="atv">"text"<span class="pln"> <span class="tag">/><span class="pln"><br/><span class="tag"></p><span class="pln"><br/><span class="tag"><span<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n5"<span class="tag">><span class="pln">多层嵌套1<span class="tag"></span><span class="pln"><br/><span class="tag"><span<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n6"<span class="tag">><span class="pln">多层嵌套2<span class="tag"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
wrap()
<span class="com">// 在n2元素外包裹strong元素:<strong>{#n2}</strong><span class="pln"><br/>$<span class="pun">(<span class="str">"#n2"<span class="pun">).<span class="pln">wrap<span class="pun">(<span class="str">'<strong/>'<span class="pun">);<span class="pln"><br/><br/><br/><span class="com">// 在n4元素外包裹form元素:<form name="myForm">{#n4}</form><span class="pln"><br/>$<span class="pun">(<span class="str">"#n4"<span class="pun">).<span class="pln">wrap<span class="pun">(<span class="str">'<form name="myForm"></form>'<span class="pun">);<span class="pln"><br/><br/><br/><span class="com">// 在每个p元素外包裹p元素:<p data_id="index">{p}</p><span class="pln"><br/>$<span class="pun">(<span class="str">"p"<span class="pun">).<span class="pln">wrap<span class="pun">(<span class="pln"> <span class="kwd">function<span class="pun">(<span class="pln">index<span class="pun">){<span class="pln"><br/> <span class="kwd"><a href="http://www.php.cn/wiki/135.html" target="_blank">return</a><span class="pln"> <span class="str">'<p data_id="'<span class="pln"> <span class="pun">+<span class="pln"> index <span class="pun">+<span class="pln"> <span class="str">'"></p>'<span class="pun">;<span class="pln"> <br/><span class="pun">}<span class="pln"> <span class="pun">);<span class="pln"><br/><br/><br/><span class="com">// 在n5元素外包裹嵌套的p元素:<p><p><em><b>{#n5}</b></em></p></p><span class="pln"><br/>$<span class="pun">(<span class="str">"#n5"<span class="pun">).<span class="pln">wrap<span class="pun">(<span class="pln"> <span class="str">'<p><p><em><b></b></em></p></p>'<span class="pln"> <span class="pun">);<span class="pln"><br/><br/><br/><span class="com">// 在n6元素外包裹嵌套的p元素:<p><p> <em><b></b></em>${#n5}</p></p><span class="pln"><br/><span class="com">// wrap()会从外层p依次往内部查找,以确定n5元素的所在位置<span class="pln"><br/><span class="com">// wrap()将从外往内检查每层嵌套的第一个元素,如果该元素没有子元素或者第一个子元素不是Element节点,就停止向内查找<span class="pln"><br/><span class="com">// 由于参数的'<p>'后面有空格(文本节点),也就是说p元素的第一个子元素不是Element类型,因此直接将n6插入到p元素内部的末尾位置<span class="pln"><br/>$<span class="pun">(<span class="str">"#n6"<span class="pun">).<span class="pln">wrap<span class="pun">(<span class="pln"> <span class="str">'<p><p> <em><b></b></em></p></p>'<span class="pln"> <span class="pun">);</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
Führen Sie den Code aus wrap()
platziert das Start- und End-Tag des umschlossenen Elements auf beiden Seiten des passenden Elements.
<span class="tag"><p<span class="pln"> <span class="atn">data_id<span class="pun">=<span class="atv">"0"<span class="tag">><p<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n1"<span class="tag">><span class="pln"><br/> <span class="tag"><strong><span<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n2"<span class="tag">><span class="pln">span#n2<span class="tag"></span></strong><span class="pln"> <br/><span class="tag"></p></p><span class="pln"><br/><span class="tag"><p<span class="pln"> <span class="atn">data_id<span class="pun">=<span class="atv">"1"<span class="tag">><p<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n3"<span class="tag">><span class="pln"><br/> <span class="tag"><form<span class="pln"> <span class="atn">name<span class="pun">=<span class="atv">"myForm"<span class="tag">><input<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n4"<span class="pln"> <span class="atn">type<span class="pun">=<span class="atv">"text"<span class="tag">></form><span class="pln"><br/><span class="tag"></p></p><span class="pln"><br/><span class="tag"><p><p><em><b><span<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n5"<span class="tag">><span class="pln">多层嵌套1<span class="tag"></span></b></em></p></p><span class="pln"><br/><span class="tag"><p><p><span class="pln"> <span class="tag"><em><b></b></em><span<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n6"<span class="tag">><span class="pln">多层嵌套2<span class="tag"></span></p></p></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Methoden wrap(), wrap() und unwrap() von jquery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!