Heim >Web-Frontend >js-Tutorial >jquery findet übergeordnete Elemente und untergeordnete Elemente (persönliche Erfahrungszusammenfassung)_jquery
jquery findet übergeordnete Elemente und untergeordnete Elemente (persönliche Erfahrungszusammenfassung)_jquery
WBOYOriginal
2016-05-16 16:52:591394Durchsuche
Es tritt häufig auf, wenn js oder jquery zum Suchen von übergeordneten und untergeordneten Elementen verwendet wird. Bei der Verwendung kommt es jedoch immer leicht zu Verwirrung. Ich glaube, dass die Verwendung in Zukunft viel bequemer sein wird.
Hier ist die Methode, mit der jquery das übergeordnete Element nach oben findet : close() parent() parent()
Methode zum Durchsuchen untergeordneter Elemente: find()children()
jquery findet übergeordnetes Element, untergeordnetes Element >
< ;body>
p>Absatz 1 Übergeordnetes Element finden
11closest( ) Sucht bis zum nächsten Element (gibt ein jQuery-Objekt mit null oder einem Element zurück)
🎜>
21parent() method
;
31parent("selector") method
Tabelle>
mydiv">
id="sectd2">Tabelle2 finden Die td-Kinder()-Methode
] Attribut zu finden
;/td> html>
js-Code:
Code kopieren
Der Code lautet wie folgt:
$(function(){ /************ Übergeordnetes Element finden *************/ //closest() method $("#mytd1").bind("click",function(){ //alert($(this).html()); alert($(this).closest("table").attr("id")); /alert($(this).closest("table").html());
//parent() method $("#mytd2").bind ("click",function(){ //alert($(this).html()); //$(this).html() ist 21 (this).attr("id") ist mytd2 alert($(this).parent().parent().attr("id")); //.parent() ist tr und der zweite .parent ist tbody ist kein tbody-Tag und das dritte gefundene .parent() ist Tabelle
//document.write("Die ID des ersten Elternteils:" $(this).parent().attr(" id" ) ". Die ID des zweiten übergeordneten Elements lautet: " $(this).parent().parent().attr("id") ". Die ID des dritten übergeordneten Elements lautet: " $(this).parent () .parent().parent().attr("id"));
});
//parent("selector") parent("selector") $ ("#mytd3").bind("click",function(){ $("p").parent("#div1").css("background", "yellow"); //Das p Tag wird hier ersetzt. Ich weiß nicht, warum das Element mit this //alert($(this).parent("#div").attr("id"));//undefiniert nicht gefunden werden kann 🎜>alert($(this).parents("div").attr("id"));//div1 achten Sie auf ein Elternteil });
/* *********** Untergeordnete Elemente finden *************/ //Finden Sie das td-Element von Tabelle2 find() $("#sectd1").bind("click",function(){ alert($("# table2") .find("td").length); /* $("#table2").find("td").each(function(index,element){ alert($( element).text()); function() { var table = $("#table2"); alert($("#table2").children().children().children("td[id='sectd2'] "). html()); //children() is tbodychildren() is tr children("td[id='sectd2']") is td });
// Kinder[] von js $("#sectd3").bind("click",function(){ var table = document.getElementById("table2"); alert (table.children[0].children[2].children[0].innerHTML); //children[0] ist tbodychildren[2] ist tr in der dritten Zeilechildren[0] ist td }) ;
});
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
