it-swarm.com.de

Aktuelles Element in jQuery auswählen

Ich habe folgenden HTML-Code:

<div>
       <a>Link A1</a>
       <a>Link A2</a>
       <a>Link A3</a>
</div>

<div>
       <a>Link B1</a>
       <a>Link B2</a>
       <a>Link B3</a>
</div>

Wenn der Benutzer auf einen Link über HTML klickt, möchte ich das jQuery-Objekt des entsprechenden Elements <a> Abrufen und dann dessen Geschwister bearbeiten. Ich kann mir keine andere Möglichkeit vorstellen, als eine ID für jedes <a> - Element zu erstellen und diese ID an einen onclick-Ereignishandler zu übergeben. Ich möchte wirklich keine Ausweise verwenden.

Irgendwelche Vorschläge?

38
Salamander2007

Glücklicherweise bieten Ihnen die jQuery-Selektoren viel mehr Freiheit:

$("div a").click( function(event)
{
   var clicked = $(this); // jQuery wrapper for clicked element
   // ... click-specific code goes here ...
});

... hängt den angegebenen Rückruf an jeden <a> in einem <div> an.

68
Shog9

Wenn das jQuery-Ereignis click Ihren Ereignishandler aufruft, setzt es "this" auf das Objekt, auf das geklickt wurde. Um es in ein jQuery-Objekt zu verwandeln, übergeben Sie es einfach an die Funktion "$": $(this). Um zum Beispiel das nächste Geschwisterelement zu erhalten, würden Sie dies im Click-Handler tun:

var nextSibling = $(this).next();

Edit: Nachdem ich Kevins Kommentar gelesen hatte, wurde mir klar, dass ich mich in Bezug auf deine Wünsche irre. Wenn Sie das tun möchten, wonach er gefragt hat, d. H. Den entsprechenden Link im anderen Div auswählen, können Sie $(this).index() verwenden, um die Position des angeklickten Links abzurufen. Dann würden Sie den Link in der anderen Division nach seiner Position auswählen, zum Beispiel mit der "eq" -Methode.

var $clicked = $(this);
var linkIndex = $clicked.index();
$clicked.parent().next().children().eq(linkIndex);

Wenn Sie in der Lage sein möchten, beide Wege zu gehen, müssen Sie in irgendeiner Weise bestimmen, in welchem ​​Div Sie sich befinden, damit Sie wissen, ob Sie "next ()" oder "prev ()" nach "parent ()" benötigen.

9
Matthew Crumley

Hier finden Sie die Methoden siblings () und parent () .

// assuming A1 is clicked
$('div a').click(function(e) {
    $(this); // A1
    $(this).parent(); // the div containing A1
    $(this).siblings(); // A2 and A3
});

Wenn Sie diese Methoden mit andSelf () kombinieren, können Sie eine beliebige Kombination dieser Elemente bearbeiten.

Edit: Der Kommentar von Mark zur Event-Delegation auf Shog9s Antwort ist sehr gut. Der einfachste Weg, dies in jQuery zu erreichen, ist die Verwendung der live () -Methode.

// assuming A1 is clicked
$('div a').live('click', function(e) {
    $(this); // A1
    $(this).parent(); // the div containing A1
    $(this).siblings(); // A2 and A3
});

Ich denke, es bindet das Ereignis tatsächlich an das Wurzelelement, aber der Effekt ist der gleiche. Es ist nicht nur flexibler, sondern verbessert in vielen Fällen auch die Leistung. Lesen Sie unbedingt die Dokumentation, um eventuelle Stolpersteine ​​zu vermeiden.

5
Alex Barrett

Ich denke, durch die Kombination von . Children () mit $ (this) werden nur die Kinder des ausgewählten Elements zurückgegeben

folgendes berücksichtigen:

$("div li").click(function() {
$(this).children().css('background','red');
});

dadurch wird nur der Hintergrund der angeklickten Li geändert

1
Ayman

Zum Auswählen des Geschwisters benötigen Sie Folgendes:

$(this).next();

Der Kommentar von Shog9 ist also nicht korrekt. Zuallererst müssten Sie die Variable "angeklickt" außerhalb der div-Klickfunktion benennen, andernfalls geht sie verloren, nachdem der Klick erfolgt ist.

var clicked;

$("div a").click(function(){
   clicked = $(this).next();
   // Do what you need to do to the newly defined click here
});

// But you can also access the "clicked" element here
0
Josh Delsman