Ein selektiertes jQuery-Objekt in ein reines DOM-Objekt konvertieren
Problem
Selektiert man auf einer Seite durch jQuery-Methoden Elemente, erhält man ein Set aus jQuery-Objekten, aber nicht aus reinen DOM-Objekten. Da es sich um jQuery-Objekte handelt, können Sie diese nur mit jQuery-Methoden bearbeiten. Um DOM-Methoden und -Eigenschaften nutzen zu können, muss das Set in ein DOM-Objekt konvertiert werden.
Lösung
jQuery stellt eine Core-Methode get() bereit, die alle
gefundenen jQuery-Objekte in ein Array mit DOM-Objekten
zurückwandelt. Zusätzlich können Sie einen Index-Wert als Argument
angeben, der nur das Element an der entsprechenden Index-Position
als DOM-Objekt zurückgibt, zum Beispiel $.get(1);. Allerdings ist diese Möglichkeit eher
aus historischen Gründen vorhanden. Statt $.get(index) sollten Sie lieber die Notation über
[] nutzen, zum Beispiel also
$("div")[1];.
Warning
Wir reden hier über die Core-Methode
.get(), die ein jQuery-Objekt in ein
DOM-Array umwandelt. Es gibt auch eine Ajax-Methode get, mit der eine Seite per HTTP GET-Anfrage
geladen wird.
Da get() ein Array
zurückgibt, können Sie dieses durchlaufen, um an die DOM-Elemente
zu gelangen. Durch die Umwandlung können Sie all die klassischen
DOM-Eigenschaften und -Methoden nutzen. Lassen Sie uns ein
einfaches Beispiel mit innerHTML
betrachten:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Kapitel 3 - Rezept 3 - Konvertieren eines selektierten jQuery-Objekts in ein
reines DOM-Objekt</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
(function($){
$(document).ready(function(){
var inner = $("div")[0].innerHTML;
alert(inner);
});
})(jQuery);
</script>
</head>
<body>
<div>
<p>
jQuery die JavaScript-Bibliothek für weniger Schreiben und mehr Erreichen.
Hilft Entwicklern seit 2006.
</p>
</div>
</body>
</html>
Figure 3-3 zeigt das Ergebnis.
Wir selektieren zunächst alle <div>-Elemente auf der Seite und rufen dann
[0] auf. Dabei übergeben wir den Index
des Objekts, an dem wir interessiert sind. Da es nur ein
<div> auf der Seite gibt,
übergeben wir hier 0. Schließlich
rufen wir eine Eigenschaft, hier innerHTML, auf, um das reine DOM-Element zu
erhalten.
Diskussion
Die Core-Methode get() kann sehr nützlich sein, da es einige
Nicht-jQuery-Methoden gibt, die wir für unsere Zwecke einsetzen
können. Stellen Sie sich vor, wir haben eine Liste und wollen diese
in umgekehrter Reihenfolge ausgeben. Da get() ein Array zurückliefert, können wir dessen
Methoden nutzen, um die Liste umgekehrt zu sortieren und sie dann
wieder auszugeben:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Kapitel 3 - Rezept 3 - Konvertieren eines selektierten jQuery-Objekts in ein
reines DOM-Objekt</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
<!--
(function($){
$(document).ready(function(){
var lis = $("ol li").get().reverse();
$("ol").empty();
$.each(lis, function(i){
$("ol").append("<li>" + lis[i].innerHTML + "</li>");
});
});
})(jQuery);
//-->
</script>
</head>
<body>
<h2>New York Yankees - Batting Line-up</h2>
<ol>
<li>Jeter</li>
<li>Damon</li>
<li>Teixeira</li>
<li>Posada</li>
<li>Swisher</li>
<li>Cano</li>
<li>Cabrera</li>
<li>Molina</li>
<li>Ransom</li>
</ol>
</body>
</html>
Figure 3-4 zeigt die Ausgabe.
