JQuery-Funktionen und wie sie zusammenarbeiten (after (), $ (this) .next (). Html ()) - Javascript, Jquery, HTML

Ich benutze eine Funktion in JQuery, aber ich verstehe nicht vollständig, wie es funktioniert. Vielleicht kann mir jemand helfen?

    $("[src*=plus]").live("click", function () {
$(this).closest("tr").after("<tr><td></td><td colspan = "999">" + $(this).next().html() + "</td></tr>");
$(this).attr("src", "Imgs/minus.png");
});
$("[src*=minus]").live("click", function () {
$(this).attr("src", "Imgs/plus.png");
$(this).closest("tr").next().remove();
});

Was bedeutet das? Ich meine im Detail. ^^ "

 $(this).closest("tr").after("<tr><td></td><td colspan = "999">" + $(this).next().html() + "</td></tr>");

Antworten:

Brechen wir es auseinander.

$(this)

Bezieht sich auf dieses Element, d. H. Auf das Element, auf das geklickt wurde.

.closest("tr")

Gehen Sie von diesem Element aus den DOM-Baum hinauf, um das nächste Element zu finden, das dem entspricht tr Selektor (d. h. a <tr> Element)

.after("<tr><td></td><td colspan = "999">" + $(this).next().html() + "</td></tr>");

Und fügen Sie dieses HTML danach hinzu.

$(this).next().html()

Mittel nehmen this Element finden die next eins und zurück sein html.

Das alles bedeutet im Grunde genommen Fügen Sie der Tabelle eine weitere Zeile mit zwei Zellen hinzu, von denen eine leer und die andere mit einem Spaltenbereich von 999 ist, und fügen Sie darin den HTML-Code des Elements nach demjenigen ein, auf den gerade geklickt wurde.