Seleziona l'elemento precedente usando solo il selettore jQuery

Question

Devo selezionare l'elemento precedente usando solo un jQuery selector.

<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); 
}); 

Desidero selezionare div quale classe .hitarea. Sto cercando qualcosa come $("#devicelist:div.hitarea")

Dovrebbe essere fatto solo con un selector di jQuery.

Answer 1

$ ('hitArea') è anche un selettore.

È possibile utilizzare questo come selettore:

$('#devicelist,.hitarea') 

Answer 2

è possibile utilizzare il selettore prev()

Descrizione: Get pari livello immediatamente precedente di ciascun elemento l'insieme di elementi accoppiati, eventualmente filtrati da un selettore.

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

Answer 3

In primo luogo il metodo di on() (come con tutti gli eventi-delega) deve essere legato alla vicina elemento non dinamicamente aggiunto al bersaglio designato, come notato nell'API:

Nella maggior parte dei casi, un evento come il clic si verifica raramente e le prestazioni non rappresentano un problema significativo. Tuttavia, eventi ad alta frequenza come mousemove o scroll possono sparare decine di volte al secondo, e in questi casi diventa più importante usare giudiziosamente gli eventi. Le prestazioni possono essere aumentate riducendo la quantità di lavoro svolto nel gestore stesso, memorizzando nella cache le informazioni necessarie al gestore anziché ricalcolarlo o limitando il numero di aggiornamenti di pagina effettivi utilizzando setTimeout.

Il collegamento di molti gestori di eventi delegati nella parte superiore dell'albero del documento può ridurre le prestazioni. Ogni volta che si verifica l'evento, jQuery deve confrontare tutti i selettori di tutti gli eventi associati di quel tipo a ogni elemento nel percorso dalla destinazione dell'evento fino all'inizio del documento. Per prestazioni ottimali, allegare eventi delegati in un percorso del documento il più vicino possibile agli elementi di destinazione. Evitare l'uso eccessivo di documenti o documenti.body per eventi delegati su documenti di grandi dimensioni.

Con questo in mente (assumendo che il ul o ol è presente nella pagina quando il jQuery corre inizialmente) Io suggerirei legandosi direttamente a quell'elemento:

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

piuttosto che al document si.

Come ho notato nel commento, i CSS mancano di un selettore fratello precedente e jQuery (per quanto ne so ancora) non ha compensato quella mancanza.Questo lascia una soluzione ovvia di:

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

più conciso scritto come:

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

Si potrebbe, naturalmente, se si conosce l'indice (dato che si sta concentrando sul secondo elemento figlio) usa semplicemente:

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