Possibile errore di selettore classe JQuery

Question

Ho una chiamata ajax che restituisce un frammento HTML. Sto provando a selezionare un div in quel frammento prima del rendering.

Un esempio di HTML:

<div class="event-detail repBy-container"> 
    <div class="copy">.....</div> 
    <div class="links"> 
     .... 
    </div> 
    <div class="contacts"> 
     <div class="name-brand">....</div><div class="details">...., <a href="mailto:...@....">...</a></div> 
    </div> 
</div> 

Ora il problema:

function ajaxReturn(data) { 
    alert($(data).find('.event-detail').length); <-- Returns 0 
    alert($(data).find('.copy').length); <-- Returns 1 
} 

Si tratta di un bug o sto facendo qualcosa di sbagliato?

Answer 1

.find() ottiene discendenti solo, non dal livello attuale, avresti bisogno .filter() per ottenere elementi dal set corrente (che è la radice di ciò che siete tornati), in questo modo:

function ajaxReturn(data) { 
    alert($(data).filter('.event-detail').length); //<-- Returns 1 
    alert($(data).find('.copy').length); //<-- Returns 1 
} 

Se si desidera .find() a lavorare in entrambi i casi, aggiungere il contenuto di un contenitore padre, in questo modo:

function ajaxReturn(data) { 
    var parent = $("<div />").append(data); 
    alert(parent.filter('.event-detail').length); //<-- Returns 1 
    alert(parent.find('.copy').length); //<-- Returns 1 
} 

Answer 2

Questo è il comportamento previsto.

• Si sta cercando .event-detail sotto il proprio div e non ce n'è.
• Stai cercando .copy sotto il tuo div e ce n'è uno.

Answer 3

dipende da ciò che viene passato nella funzione ajaxReturn. cioè cosa contiene data?

Se contiene l'HTML che hai citato, questo è il comportamento previsto. Questo perché il metodo .find() cerca all'interno del contesto corrente, escludendolo. Se il div esterno nel tuo esempio è il div esterno in data allora .find() cercherà .event-detailall'interno di di tale div.