jquery trouve les éléments parents et les éléments enfants (résumé de l'expérience personnelle)

Cela est souvent rencontré lors de l'utilisation de js ou de jquery pour rechercher des éléments parents et des éléments enfants. Cependant, il est toujours facile de se tromper lors de son utilisation. Voici un résumé, je pense qu'il sera beaucoup plus pratique à utiliser à l'avenir

Voici la méthode utilisée par jquery pour trouver l'élément parent vers le haut. : close() parents() parent()

Méthode utilisée pour rechercher les éléments enfants : find() children()

js utilise l'attribut children[]

html code

Copier le code Le code est le suivant :

jquery trouve l'élément enfant de l'élément parent >

< ;corps>

p>Paragraphe 1 Rechercher l'élément parent

🎜>
;

table>

11closest( ) Recherche jusqu'à l'élément le plus proche (renvoie un objet jQuery de zéro ou un élément)
21 méthode parent()	31parent("selector") méthode

id="sectd2">Find table2 La méthode td children()

] attribut pour trouver

;/td>

html>

code js :

Copier le code

Le code est le suivant :

 
 >$(function(){ 
/*********** Rechercher l'élément parent *************/ 
//closest() méthode
$("#mytd1").bind("click",function(){ 
//alert($(this).html()); 
alert($(this).closest("table").attr("id")); //table1 au lieu de table0 
/ /alert($(this).closest("table").html()); 

//méthode parent()
$("#mytd2").bind ("click",function(){ 
//alert($(this).html()); //$(this).html() vaut 21 (this).attr("id") vaut mytd2 
alert($(this).parent().parent().parent().attr("id")); 
//.parent() est tr et le deuxième .parent est tbody. n'est pas une balise tbody, et le troisième .parent() trouvé est table 

//document.write("L'identifiant du premier parent :" $(this).parent().attr(" id" ) ". L'identifiant du deuxième parent est : " $(this).parent().parent().attr("id") ". L'identifiant du troisième parent est : " $(this).parent () .parent().parent().attr("id")); 

}); 

//parent("sélecteur") parents("sélecteur") 
$ ("#mytd3").bind("click",function(){ 
$("p").parent("#div1").css("background", "jaune"); //Le p la balise est remplacée ici. Je ne sais pas pourquoi l'élément ne peut pas être trouvé en utilisant this
//alert($(this).parent("#div").attr("id"));//undefined 
alert($(this).parents("div").attr("id"));//div1 fais attention à un parent parents 
}); 


/* *********** Rechercher des éléments enfants *************/ 
//Trouver l'élément td de table2 find() 
$("#sectd1").bind("click",function(){ 
alert($("# table2") .find("td").length); 
/* $("#table2").find("td").each(function(index,element){ 
alert($( élément). text()); 
}); */ 
}; 

//children() 
$("#sectd2").bind("clic", function() { 
var table = $("#table2"); 
alert($("#table2").children().children().children("td[id='sectd2'] "). html()); 
//children() est tbody children() est tr children("td[id='sectd2']") est td 
}); 

 
 // enfants[] de js 
$("#sectd3").bind("click",function(){ 
var table = document.getElementById("table2"); 
alerte (table. children[0].children[2].children[0].innerHTML 
//children[0] est tbody children[2] est tr dans la troisième ligne children[0] est td }) ; 

} ; 

Étiquettes associées：

jquery élément enfant élément parent

source：php.cn

Article précédent：Conseils pour définir la zone déroulante en lecture seule à l'aide des astuces js_javascript Article suivant：Explication détaillée de l'utilisation de jquery selector_jquery

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

Derniers articles par auteur