Maison > interface Web > Questions et réponses frontales > Comment trouver la valeur du contenu des nœuds frères dans jquery

Comment trouver la valeur du contenu des nœuds frères dans jquery

青灯夜游
Libérer: 2022-08-15 18:13:04
original
1957 Les gens l'ont consulté

Étapes de mise en œuvre : 1. Utilisez la fonction qui traverse les nœuds frères (siblings(), next(), etc.) pour obtenir les nœuds frères de l'élément spécifié. La syntaxe est "spécifier l'élément. Spécifier la fonction de traversée" ; Utilisez text() ou html() La fonction obtient la valeur du contenu du nœud sélectionné, la syntaxe est "sibling node.text()" ou "sibling node.html()".

Comment trouver la valeur du contenu des nœuds frères dans jquery

L'environnement d'exploitation de ce tutoriel : système windows7, version jquery3.6.0, ordinateur Dell G3.

jquery trouve la valeur de contenu des nœuds frères et sœurs. Vous pouvez voir deux parties :

  • Trouver les nœuds frères et sœurs

  • Obtenir la valeur de contenu du nœud sélectionné

Étape 1. Rechercher les nœuds frères et sœurs.

jquery fournit une variété de fonctions pour obtenir des nœuds frères et sœurs, il y en a généralement sept :

  • méthode siblings(), principalement utilisée pour obtenir tous les éléments frères du même niveau de l'élément spécifié

  • méthode next() , principalement utilisé Utilisé pour obtenir l'élément frère suivant de l'élément spécifié

  • méthode nextAll(), principalement utilisé pour obtenir tous les éléments frères de l'élément frère suivant de l'élément spécifié

  • méthode nextUntil(), principalement utilisée pour obtenir l'élément frère suivant de l'élément spécifié Un élément frère doit être un élément entre l'élément spécifié et l'élément défini par la méthode nextUntil() La méthode

  • prev() est principalement utilisée pour obtenir. les éléments frères de niveau supérieur de l'élément spécifié. Méthode

  • prevAll(), principalement utilisée pour obtenir tous les éléments frères au niveau supérieur de l'élément spécifié. Élément frère précédent de l'élément spécifié. Cet élément frère doit être entre l'élément spécifié et la méthode prevUntil() Définissez les éléments entre les éléments

  • Exemple : utilisez next() pour obtenir le nœud frère suivant de l'élément sélectionné h2.

    $("h2").next()
    Copier après la connexion
Étape 2. Obtenez la valeur de contenu du nœud sélectionné

Utilisez la méthode text() Définissez le contenu du texte du nœud sélectionné

  • Exemple 1 : Obtenez la valeur de contenu du nœud frère suivant

    
    
    	
    		
    		
    		
    		
    	
    
    div (父)

    p(兄弟元素)

    span(兄弟元素)

    h2(本元素)

    h3(兄弟元素)

    p(兄弟元素)

    Copier après la connexion

Exemple 2 : Obtenez la valeur de contenu de tous les nœuds frères

$(document).ready(function() {
	$("button").click(function() {
		$("h2").siblings().css("color","red");
		var con=$("h2").siblings().text();
		console.log(con);
	});
});
Copier après la connexion
Comment trouver la valeur du contenu des nœuds frères dans jquery

Comment trouver la valeur du contenu des nœuds frères dans jqueryUtilisez html() Définissez le contenu du nœud sélectionné (innerHTML)

  • Exemple : Obtenez la valeur de contenu de le nœud frère précédent

    $(document).ready(function() {
    	$("button").click(function() {
    		$("h2").next().css("color","red");
    		var con=$("h2").next().html();
    		console.log(con);
    	});
    });
    Copier après la connexion

[Apprentissage recommandé :

Tutoriel vidéo jQueryComment trouver la valeur du contenu des nœuds frères dans jquery,

Vidéo web front-end

]

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal