Maison > Article > interface Web > emballage d'élément jquery

emballage d'élément jquery

无忌哥哥original: 2018-06-29 14:38:351319parcourir

jquery element wrap

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素包裹</title>
</head>
<body>
<a href="https://www.tmall.com">天猫</a>
<a href="https://taobao.com">淘宝</a>
<a href="https://www.jd.com/">京东</a>
<a href="https://www.suning.com">苏宁</a>
<p>网上购物:</p>
<button>wrap()</button>
<button>wrapIner()</button>
<button>wrapAll()</button>
<button>unwrap()</button>
</body>
</html>

* 1.wrap(content):

* Fonction : envelopper chaque nœud

* Paramètre : contenu ou élément

$(&#39;button:eq(0)&#39;).click(function(){
//用法一.用一个新标签来包裹目标元素
// $(&#39;a&#39;).wrap($(&#39;<li>&#39;))
//简写:
$(&#39;a&#39;).wrap(&#39;<li>&#39;)
//用法二.用已存在的标签来包裹目标节点
// $(&#39;a&#39;).wrap($(&#39;p&#39;))
})

* 2.wrapInner(content):

* Fonction : envelopper le contenu de chaque nœud

* Paramètre : contenu ou élément

$(&#39;button:eq(1)&#39;).click(function(){
//用法一.用一个新标签来包裹目标节点内容
$(&#39;li&#39;).wrapInner(&#39;<strong>&#39;)
//用法二.用已存在的标签来包裹目标节点内容
$(&#39;li&#39;).wrapInner($(&#39;p&#39;))
})

* 3.wrapAll(content):

* Fonction : envelopper un groupe de nœuds

* Paramètres : contenu ou élément

$(&#39;button:eq(2)&#39;).click(function(){
//用法一.用一个新标签来包裹目标节点内容
$(&#39;li&#39;).wrapAll(&#39;<ul style="background-color: wheat">&#39;)
//用法二.用已存在的标签来包裹目标节点内容,给<li>再套一个<div>
$(&#39;li&#39;).wrapAll($(&#39;<div style="background-color: cyan">&#39;))
})

* 4.unwrap(content) :

* Fonction : Supprimer l'élément parent sur le nœud

* Paramètre : Aucun

$(&#39;button:eq(3)&#39;).click(function(){
$(&#39;li&#39;).unwrap()
//可以一直往上走
$(&#39;li&#39;).unwrap().unwrap()
})

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

jquery

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：À propos de l'installation et de l'utilisation du composant de téléchargement d'images vux uploaderArticle suivant：À propos de l'installation et de l'utilisation du composant de téléchargement d'images vux uploader

Articles Liés

Voir plus