Das Örtchen RSS-Feed
Suchen
Blog
Ähnliche Beiträge
Neueste Kommentare
Neueste Einträge
Populäre Einträge
Tagwolke
addon auswertung barcamp blog bug cms cms made simple datenkrake drupal feed film firefox frickeln friday gewinnspiel hardware how-to individualisierung meinung mmo modul nas php problem rss se7en server sicherheit sicherung software spiel teil theme trailer unterhaltung update windows windows 7 wordpress wow
Monatsarchiv

jQuery: Selektoren, Traversing und Filter

Derzeit beschäftige ich mich ein wenig intensiver mit den Möglichkeiten von jQuery und hier insbesondere mit den Selektoren und dem sogenannten Traversing (dem Durchlaufen der Baumstruktur). Im Rahmen dieses Beitrags möchte ich an einem Beispiel einige der Möglichkeiten vorstellen.

Das Beispiel

Als Beispiel soll nachfolgender XHTML-Code herhalten, welcher eine Tabelle mit vier Zeilen und zwei Spalten erstellt. In der rechten Spalte sind Formularfelder und weitere Elemente in unterschiedlichen Verschachtelungen enthalten. Es wurden absichtlich an den meisten Stellen td- und p-Tags eingesetzt.

 <!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" dir="ltr" lang="de-DE">
<head>
    <title>jQuery-Beispiel</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script type="text/javascript">
        $.noConflict();
    </script>
    <style type="text/css">
        tr {
            vertical-align: top;
        }
        td {
            padding: 10px 5px;
        }
        p {
            margin: 0px;
            padding: 0px;
        }
        .selektiert {
            border: 1px solid red;
        }
    </style>
</head>
<body>

    <form action="#" method="post">
        <table>
            <tr>
                <td>Zeile 1</td>
                <td>
                    <p>Beschreibung 1</p>
                    <input type="text"
                        name="eingabe1" id="textfeld1" class="eingaben"
                    />
                </td>
            </tr>
            <tr>
                <td>Zeile 2</td>
                <td>
                    <p>Beschreibung 2</p>
                    <div>
                        <textarea
                            name="eingabe2" id="texteingabe2" class="eingaben"
                            rows="5" cols="20"
                        ></textarea>
                    </div>
                </td>
            </tr>
            <tr>
                <td>Zeile 3</td>
                <td>
                    <p>Beschreibung 3</p>
                    <input type="checkbox"
                        name="eingabe3" id="checkbox3" class="eingaben"
                    />
                    <p style="display: inline;">Erklärung 3</p>
                </td>
            </tr>
            <tr>
                <td>Zeile 4</td>
                <td>
                    <input type="submit"
                        value="Abschicken"
                    />
                    <p style="display: inline;">Erklärung 4</p>
                </td>
            </tr>
        </table>
    </form>

    <script type="text/javascript">
        jQuery(document).ready(function($){
            (...);
        });
    </script>

</body>
</html>

Hinweise: jQuery wird zur Vereinfachung des Beispiels von googleapis.com eingebunden. Unser zukünftiger Code kommt an die fettmarkierte Stelle oberhalb des schließenden body-Tags. Der Code entspricht der sinnvollsten Schreibweise zur Vermeidung von Inkompatibilitäten mit anderen Bibliotheken wie beispielsweise Prototype.

Selektoren

Wenn wir Code an der markierten Stelle einfügen, so wird dieser ausgeführt sobald das komplette HTML-Dokument geladen wurde.

Beispiel 1: Um nun das erste Formular-Element anhand seiner ID anzusprechen, genügt in jQuery nachfolgender Code:

 $('#textfeld1') 

Hinweis: Die Raute markiert wie in CSS, daß wir eine ID ansprechen möchten.

Beispiel 2: Wollen wir hingegen die ersten drei Formular-Elemente ansprechen, so geht dies beispielsweise mittels ihrer CSS-Klasse.

$('.eingaben')

Hinweis: Eine Klasse ist wie in CSS anhand des vorangehenden Punktes zu erkennen. Als Ergebnis erhalten wir ein Set mit drei Elementen.

Beispiel 3: Hätten die Formular-Elemente keine gemeinsame Klasse, so könnten wir sie auch anhand ihrer Tags ansprechen.

 $('input, textarea') 

Hinweis: Die einzelnen Tags werden einfach Komma-getrennt aufgezählt. Nun erhalten wir ein Set mit vier Elementen, da auch der Submit-Button ein input-Tag ist.

Beispiel 4: Doch wie sprechen wir nun alle Formular-Elemente außer dem Submit-Button an?

 $('input[type!="submit"], textarea') 

Hinweis: Es gibt auch die Selektoren [attributname="wert"], [attributname^="wert"], [attributname$="wert"] und [attributname*="wert"]. Nun erhalten wir erneut ein Set aus drei Elementen, jedoch ohne eine gemeinsame Klasse zu benötigen.

Beispiel 5: Wollen wir nun beispielsweise für das aus Beispiel 3 den Wert ändern, so ist dies über die Methode .val() möglich:

$('input, textarea').val('Test');

Hinweis: Bei der mittels .val() geänderten Checkbox ist dies natürlich nur im generierten Quelltext sichtbar, den man sich beispielsweise mittels Firebug oder der Web Developer Toolbar ansehen kann.

Beispiel 6: Wollen wir hingegen dem Element aus Beispiel 1 eine weitere Klasse "selektiert" hinzufügen, so können wir hierzu die Methode .addClass() benutzen:

$('#textfeld1').addClass('selektiert');

Hinweis: Das Gegenstück zu .addClass() ist .removeClass(). In beiden Fällen werden weitere Klassen des Elements nicht verändert.

Traversing:

Beispiel 1: Wir wollen nun allen td-Elementen, die Elemente des Sets aus Beispiel 4 enthalten, die Klasse "selektiert" hinzufügen.

Versuch 1:

$('input[type!="submit"], textarea').parent().addClass('selektiert');

Problem: Die Textarea wird von einem div-Tag eingeschlossen, welches als direktes Eltern-Element die Klasse erhält.

Versuch 2:

 $('input[type!="submit"], textarea').parent('td').addClass('selektiert'); 

Problem: Das div-Tag um die Textarea erhält die Klasse nicht mehr, aber auch nicht das umgebende td-Tag.

Versuch 3:

 $('input[type!="submit"], textarea').closest('td').addClass('selektiert'); 

Hinweis: Mittels .closest() ermittelt man das im Baum tiefste Elternelement, auf welches der Selektor zutrifft.

Beispiel 2: Wir wollen nun den Inhalt jedes ersten p-Tags (in einem td mit einem Formular-Element) mittels .html() ändern. Hierzu gehen wir zunächst den Baum bis zum td hoch und dann sehen wir uns dessen Kinder mit .find() an.

Versuch 1:

 $('input[type!="submit"], textarea').closest('td').find('p').html('Test'); 

Problem: Es werden alle p-Tags gefunden und nicht nur das erste innerhalb des td-Tags.

Versuch 2:

 $('input[type!="submit"], textarea').closest('td').find('p:first-child').html('Test'); 

Hinweis: Das Gegenstück zu :first-child ist :last-child. Alternativ gibt es auch noch den Selektor  :nth-child(1). Bei allen drei Selektoren ist die Positionsnummer jedoch unabhängig davon, ob es sich (in diesem Beispiel) um ein p-Tag handelt oder nicht. Sollen bei der Zählung nur die p-Tags berücksichtigt werden, so ist dies mit dem Selektor :eq() möglich (null-basiert, somit erreicht man mit :eq(0) das erste Element und mit :eq(-1) das letzte Element).

Filter

Beispiel: Wir wollen nun nur den Inhalt des allerersten p-Tags unseres Sets aus Versuch 1 des letzten Beispiels ändern.

 $('input[type!="submit"], textarea').closest('td').find('p').eq(0).html('Test'); 

Hinweis: Die Index-Angabe der Filter-Methode .eq()  ist ebenfalls null-basiert. Wir reduzieren das mittels. find() zusammengestellte Set von p-Tags auf ein einziges Element mit dem passenden Index innerhalb des Sets. Um das allerletzte p-Tag anzusprechen, kann man den Index -1 nutzen. Negative Angaben beginnen die Zählung beim letzten Element, somit kann man mit -2 das vorletzte Element des Sets ansprechen.

Erläuterungen

Die Inhalte eines Sets sind oftmals vom derzeitigen Kontext der Methode abhängig, deswegen nachfolgend noch einmal eine schrittweise Erläuterung.

 $('input[type!="submit"], textarea')  

Es wird ein Set von Elementen ermittelt, die input-Tags (außer Submit-Buttons) oder Textareas sind.

 $('input[type!="submit"], textarea').closest('td')  

Für jedes Element des Sets wird das nächsthöhere Eltern-Element gesucht, welches ein td-Tag ist. Dies ergibt ein neues Set mit td-Tags.

 $('input[type!="submit"], textarea').closest('td').find('p') 

Für jedes Element dieses Sets wird wiederum einzeln nach Kind-Elementen gesucht, die ein p-Tag sind.

 $('input[type!="submit"], textarea').closest('td').find('p:first-child')  

Da für jedes td-Tag des Sets einzeln nach dem ersten Kind gesucht wird, besteht in diesem Fall kein Unterschied zwischen den Selektoren :first-child und :first.

Dies sähe in nachfolgendem Kontext anders aus:

 $('body').find('p:first-child') 

Sucht innerhalb des body-Tags nach p-Tags, welche das erste Kind-Element ihres Eltern-Elements sind.

 $('body').find('p:first') 

Sucht nur nach dem allersten p-Tag innerhalb des body-Tags.

Fazit

jQuery bietet auch für Anfänger (im Bereich der JavaScript-Bibliotheken) ein paar nützliche Spielereien, über die man erste Erfahrungen sammeln kann. Weiterführende Beispiele sind im jQuery-Tutorial von Matthias verfügbar.

Hallo! Bist du neu hier? Dann abonniere doch den RSS-Feed dieses nicht mehr ganz so stillen Örtchens, um über meine geistigen Ergüsse auf dem Laufenden zu bleiben. Alternativ besteht auch die Möglichkeit, sich von FeedBurner per E-Mail über meine Ausscheidungen benachrichtigen zu lassen.

Kommentare (2)

Re: jQuery: Selektoren, Traversing und Filter

Nun als Spielereien würde ich das nicht unbedingt bezeichnen.

jQuery ist in den vergangenen drei Jahren zu der meist verbreitetsten Library avanciert und wird durchaus auch professionellen Ansprüchen gerecht.

Grüße a.d. Harz

Werner

Re: jQuery: Selektoren, Traversing und Filter

Ich meinte auch weniger jQuery als ganzes mit den Spielereien, sondern vielmehr die vorgestellten Einsteiger-Beispiele. jQuery ist derzeit meine bevorzugte JavaScript-Bibliothek und wird es vermutlich auch noch eine ganze Weile bleiben.

P.S.: Links die nicht zu Blogs führen, werden von mir aus Kommentaren gelöscht und sind nicht erwünscht.

Kommentar hinzufügen

(If you're a human, don't change the following field)
Your first name.
Der Inhalt dieses Feldes wird nicht öffentlich zugänglich angezeigt.
Der Inhalt dieses Feldes wird öffentlich zugänglich angezeigt, aber als nofollow markiert.
Hinweis

Kommentare beleben den Blog! Ich freue mich über jeden Kommentar. Du kannst hier offen Deine Meinung zum Artikel sagen, aber bitte beachte die Netiquette und vermeide es andere zu beleidigen.

Bitte unterlasst es die Kommentare zu SEO-Zwecken zu missbrauchen. Kommentare mit Links, die nicht zu Blogs führen (oder zu Blogs mit Grauzonen-Themen) und/oder Keywords als Namen verwenden und/oder Links im Kommentarbereich enthalten, sind nicht erwünscht!

Möchtest Du mir einen Blog-Artikel schmackhaft machen, dann schreib die URL ohne Link-Tag und ohne http(s):// in den Kommentarbereich und ich werde diesen bei Gefallen verlinken.

Die ersten vier Kommentare (mit den gleichen Daten bei Name, E-Mail und Blog) landen vor der Veröffentlichung in meiner Freigabe-Warteschlange und ich behalte mir das Recht vor, Kommentare entsprechend dieser Regeln anzupassen oder zu löschen!

t3n Magazin - Jetzt im Abo bestellen