JQuery Kochbuch Jquery Community Experts

Prev Next

Den Index eines Elements in einer Selektion ermitteln

Problem

Wenn Sie ein Event an eine ganze Reihe von selektierten Elementen auf einer Seite binden, müssen Sie genau wissen, welches Element aus dem Set angeklickt wurde, um die Aktion für das gebundene Event zu »personalisieren«.

Lösung

Klicken wir ein Element an, dann können wir die Core-Methode index() verwenden, um den Index des Elements in einer Selektion zu erhalten:

<!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 4 - Den Index eines Elements in einer Selektion 
    ermitteln</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(){
                $("div").click(function() {
                    alert("Sie haben auf ein div mit dem Index " + 
$("div").index(this) + " geklickt.");
                });
            });
        })(jQuery);
    //-->
    </script>
</head>
<body>
    <div>Klick mich</div>
    <div class="test">Test</div>
    <div>Klick mich</div>
</body>
</html>

Figure 3-5 zeigt das Ergebnis.

Figure 3-5. Code-Ausgabe

Zuerst binden wir alle <div>-Elemente an ein Click-Event. Wenn dann ein <div> angeklickt wird, ermitteln wir, welches das Ziel war, indem wir nach dem Element in der gleichen Selektion suchen: $("div").index(this);. Dabei ist this das angeklickte <div>.

Diskussion

Die Core-Methode index() ermöglicht es Ihnen, den Index des DOM-Elements zu ermitteln, das Sie sich in einem jQuery-Set anschauen. Seit jQuery 1.2.6 können Sie auch den Index einer jQuery-Collection angeben. Die Methode liefert dann den Index des ersten gefundenen Elements zurück:

var test = $("div.test");

$("div").each(function(i){
    if ($(this).index(test) >= 0)
    {
        //tue etwas
    }
    else
    {
        //tue etwas anderes
    }
});

Wir prüfen, ob das <div> in der Schleife zu einem Eintrag aus der Collection passt, die wir in der Variable test abgelegt haben. Ist dies der Fall, führen wir damit dann etwas Bestimmtes durch.

Note

Kann die index-Methode das Element nicht finden, liefert sie −1 zurück.

Prev Next