Explication détaillée de la fonction jQuery.after()

La fonction

after() est utilisée pour insérer le contenu spécifié après chaque élément correspondant. Le contenu spécifié par

peut être : htmlstring, élément DOM (ou tableau), objet jQuery, fonction (valeur de retour).

L'opposé de cette fonction est la fonction before(), qui est utilisée pour insérer le contenu spécifié avant chaque élément correspondant.

Cette fonction appartient à l'objet (instance) jQuery.

Syntaxe

jQueryObject.after( content1 [, content2 [, contentN ]] )

Paramètres

Description du paramètre

content1 Contenu supplémentaire spécifié par le type String/Element/jQuery/Function.

content2 Le type Facultatif/String/Element/jQuery a spécifié du contenu supplémentaire.

contentN Facultatif/String/Element/jQuery type de contenu supplémentaire spécifié, il peut y avoir n'importe quel nombre.

after() peut insérer tout le contenu représenté par plusieurs paramètres dans la position immédiatement après chaque élément correspondant. Si le paramètre est de type chaîne, il est traité comme une chaîne HTML.

Nouveau support de jQuery 1.4 : le paramètre content1 peut être une fonction. after() parcourra et exécutera la fonction en fonction de tous les éléments correspondants, et cela dans la fonction pointera vers l'élément DOM correspondant.

after() transmettra également deux paramètres à la fonction : le premier paramètre est l'index de l'élément actuel dans l'élément correspondant, et le deuxième paramètre est le contenu html interne actuel (innerHTML) de l'élément. . La valeur de retour de la fonction est le contenu qui doit être inséré (peut être une chaîne HTML, un élément DOM ou un objet jQuery).

Remarque : seul le premier paramètre peut être une fonction personnalisée pour l'exécution du parcours. Si le paramètre suivant est également une fonction, sa méthode toString() est appelée, convertie en chaîne et traitée comme du contenu HTML.

Valeur de retour

La valeur de retour de la fonction after() est de type jQuery, renvoyant l'objet jQuery actuel lui-même (pour faciliter la programmation en chaîne).

Remarque : Si le contenu inséré correspond à certains éléments de la page actuelle, ces éléments disparaîtront de leurs positions d'origine. En bref, cela équivaut à une opération de déplacement et non à une opération de copie.

Exemple et description

La fonction after() est utilisée pour insérer du contenu après chaque élément correspondant :

<p>段落文本1<span></span></p><!--插入到p元素之后的位置-->
<p>段落文本2<span></span></p><!--插入到p元素之后的位置-->
<script type="text/javascript">
$("p").after( &#39;<!--插入到p元素之后的位置-->&#39; ); 
</script>

Veuillez noter la fonction after() et insertAfter() différence de fonction :

var $A = $("s1");
var $B = $("s2");
// 将$B插入到$A之后
$A.after( $B ); // 返回$A
// 将$A插入到$B之后
$A.insertAfter( $B ); // 返回表示插入内容的jQuery对象( 匹配所有$B之后插入的$A元素 )

Prenons le code HTML suivant comme exemple :

<p id="n1">
    <span id="n2">span#n2</span>    
</p>
<p id="n3">
    <label id="n4">label#n4</label>
    <i id="n5">i#n5</i>
</p>

L'exemple de code jQuery suivant est utilisé pour démontrer l'utilisation spécifique de la fonction after() :

// 在n4之后插入一个自定义的span元素
$("#n4").after(&#39;<span id="n6">span#n6(new)</span>&#39;);
// 在n2之后插入n5
// n5将从原位置上消失
$("#n2").after( document.getElementById("n5") );
// 在每个span元素之后插入自定义的strong元素
$("span").after( function(index, innerHTML){
    return &#39;<strong>strong元素&#39; + (index + 1) + &#39;</strong>&#39;;
} );

after() insérera le contenu après la balise de fermeture de l'élément spécifié sans ajouter de caractères d'espacement supplémentaires. Le code html complet après l'exécution du code ci-dessus est le suivant (le format n'a pas été ajusté). de quelque manière que ce soit) :

<p id="n1">
    <span id="n2">span#n2</span><strong>strong元素1</strong><i id="n5">i#n5</i>    
</p>
<p id="n3">
    <label id="n4">label#n4</label><span id="n6">span#n6(new)</span><strong>strong元素2</strong>
    
</p>

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!