Error posible del selector de clase JQuery

Question

Tengo una llamada ajax que devuelve un fragmento de HTML. Estoy tratando de seleccionar un div en ese fragmento antes de renderizarlo.

Un ejemplo de 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> 

Ahora el problema:

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

Es esto un error o estoy haciendo algo mal?

Answer 1

.find() obtiene descendientes solamente, no desde el nivel actual, que había necesidad .filter() para obtener los elementos desde el conjunto actual (que es la raíz de lo que regresó), así:

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

Si desea .find() para trabajar en ambos casos, añadir el contenido de un contenedor primario, así:

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

Este es el comportamiento esperado.

• Está buscando .event-detail en su div y no hay ninguno.
• Está buscando .copy en su div y hay uno.

Answer 3

depende de lo que se está pasó a la función ajaxReturn. es decir, ¿qué contiene data?

Si contiene el código HTML que citó, este es el comportamiento esperado. Esto se debe a que el método .find() busca en el contexto actual, sin incluirlo. Si el div externo en su ejemplo es el div externo en data, entonces .find() buscará .event-detaildentro de de ese div.