Maison >interface Web >js tutoriel >Explication détaillée de la fonction jQuery.before()

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

巴扎黑
巴扎黑original
2017-06-24 13:12:472521parcourir

La fonction

before() est utilisée pour insérer le contenu spécifié avant 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 after(), qui est utilisée pour insérer le contenu spécifié après chaque élément correspondant.

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

Syntaxe

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

Paramètres

Description du paramètre

content1 String Contenu supplémentaire spécifié par le type /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.

before() peut insérer tout le contenu représenté par plusieurs paramètres dans la position immédiatement avant 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. before() 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.

before() 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 les paramètres suivants sont également des fonctions, appelez sa méthode toString(), convertissez-les en chaînes et traitez-les comme du contenu HTML.

Valeur de retour

La valeur de retour de la fonction before() 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 before() est utilisée pour insérer du contenu avant chaque élément correspondant :

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

Veuillez noter la fonction before() et insertBefore( ) différence de fonction :

var $A = $("s1");
var $B = $("s2");
// 将$B插入到$A之前
$A.before( $B ); // 返回$A
// 将$A插入到$B之前
$A.insertBefore( $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 before() :

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

before() insérera le contenu avant la balise de début 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é). ) :

<p id="n1">
    <i id="n5">i#n5</i><strong>strong元素1</strong><span id="n2">span#n2</span>    
</p>
<p id="n3">
    <strong>strong元素2</strong><span id="n6">span#n6(new)</span><label id="n4">label#n4</label>
    
</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!

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