Wählen Sie das vorherige Element mit nur jQuery-Selektor

Question

Ich muss das vorherige Element nur mit einem jQuery selector auswählen.

<li class="collapsable"> 
    <div class="hitarea collapsable-hitarea"></div> 
    <span id="devicelist" class="ankr">Device List</span> 
    <ul id="ultree"> 
     <li type="dev" device="/dev/sdh1" id="dev0" class="litab"> 
      <img height="20px" width="20px" src="../Images/drive.png" class="dicon"> 
      <a class="ankr dn" href="#">'/dev/sdh1'</a> 
     </li> 
    </ul> 
</li> 

$(document).on("click","#devicelist,**Here Selector will be used**",this,function(event){ 
    console.log(this); 
    console.log(event.target); 
}); 

Ich möchte div auswählen, die Klasse hat. Ich suche nach etwas wie

Es sollte nur mit einem selector von jQuery getan werden.

Answer 1

$ ('hitArea') ist auch ein Selektor.

können Sie diese verwenden, als Selektor:

$('#devicelist,.hitarea') 

Answer 2

können Sie den Selektor prev()

Beschreibung verwenden: in den Satz von abgestimmten Elementen, die unmittelbar vorhergehenden Geschwister jedes Elements Erhalten, gegebenenfalls durch einen Selektor filtriert.

$('#devicelist').prev(); 

Answer 3

Zuerst die on() Methode (wie bei alle Event-Delegation) soll das beabsichtigte Ziel zum nächsten nicht-dynamisch hinzugefügt Elemente gebunden werden wie angegeben in der API:

In den meisten Fällen tritt ein Ereignis wie Klick selten auf und die Leistung spielt keine große Rolle. Hochfrequenzereignisse wie Mauszeiger oder Bildlauf können jedoch Dutzende Male pro Sekunde ausgelöst werden, und in diesen Fällen wird es wichtiger, Ereignisse sinnvoll zu verwenden. Die Leistung kann erhöht werden, indem der Arbeitsaufwand im Handler reduziert wird, die vom Handler benötigten Informationen zwischengespeichert und nicht neu berechnet werden, oder indem die Anzahl der tatsächlichen Seitenaktualisierungen mit setTimeout rate-limitiert wird.

Wenn Sie viele delegierte Ereignishandler am oberen Rand des Dokumentbaums anhängen, kann sich die Leistung verschlechtern. Jedes Mal, wenn das Ereignis auftritt, muss jQuery alle Selektoren aller angehängten Ereignisse dieses Typs mit allen Elementen im Pfad vom Ereignisziel bis zum Anfang des Dokuments vergleichen. Um eine optimale Leistung zu erzielen, hängen Sie delegierte Ereignisse an einem Dokumentstandort so nah wie möglich an den Zielelementen an. Vermeiden Sie eine übermäßige Verwendung von document oder document.body für delegierte Ereignisse in großen Dokumenten.

Vor diesem Hintergrund (unter der Annahme, dass die ul oder ol auf der Seite vorhanden ist, wenn die jQuery zunächst läuft) Ich würde vorschlagen, direkt zu diesem Element Bindung:

$('ul').on(/* other stuff */); 

statt auf die document selbst.

Wie ich im Kommentar bemerkte, fehlt CSS ein vorheriger Geschwister Selektor und jQuery (soweit ich noch weiß) hat für diesen Mangel nicht kompensiert.Dies lässt eine offensichtliche Lösung:

$('ul').on('click', function(e){ 
    if (e.target.id == 'devicelist' || $('#devicelist').prev()) { 
     // do stuff here 
    } 
}); 

prägnanter geschrieben wie:

$('ul').on('click', function(){ 
    var elem = $('#devicelist'); 
    if (elem || elem.prev()) { 
     // do stuff here 
    } 
}); 

Sie könnten natürlich, wenn Sie den Index (vorausgesetzt, dass Sie auf dem zweiten Kind-Element konzentriert sind) kennen einfach verwenden:

$('ul').on('click', function(e){ 
    if ($(e.target).index() < 2) { 
     // do stuff here for the first two elements 
    } 
});