jQuery selector no se comporta como se esperaba en el HTML analizado de ajax

Me he encontrado con un problema extraño hoy, espero que alguien más pueda ayudarme a resolver esto.jQuery selector no se comporta como se esperaba en el HTML analizado de ajax

El proyecto en el que estoy trabajando es, más o menos, una presentación de diapositivas jQuery. Tengo un archivo muy simple que estoy cargando a probar todo lo que fuera, se ve algo como esto:

<!doctype html public "(╯°□°）╯︵ ┻━┻"> 
    <html> 
     <head> 
      <meta charset="utf-8"> 
      <title>test</title> 
     </head> 
     <body> 
      <div id="slides" data-slidesShow="holder"> 
       <div class="slide" id="test1">test div 1</div> 
       <div class="slide" id="test2">test div 2</div> 
       <div class="slide" id="test3">test div 3</div> 
      </div> 

      <button id="previous">previous</button> 
      <button id="next">next</button> 

      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</script> 

      <script type="text/javascript" src="js/slides.js"></script> 

      <?php include 'footer.php'; ?> 
     </body> 
    </html>

De nuevo, nada ni remotamente lujoso aquí.

Ahora, en jQuery que estoy recibiendo y análisis de la página como:

$.ajax({ 
    url:  target.path, 
    dataType: "html", 
    complete: function(data){ 
     var $slides  = $('[data-slidesShow="holder"]', $(data.responseText)); 

     console.log($slides); // returns [] 
    } 
});

pero! $ diapositivas devuelve una matriz vacía, a menos que lo envuelve en un div sentido, como:

<div class="stupid-wraper-div-that-i-dont-want-or-need"> 
    <div id="slides" data-slidesShow="holder"> 
     <div class="slide" id="test1">test div 1</div> 
     <div class="slide" id="test2">test div 2</div> 
     <div class="slide" id="test3">test div 3</div> 
    </div> 
</div>

y ahora:

console.log($slides); // returns [<div id="slides" data-slideShow="holder">...</div>]

que he leído sobre la documentación de jQuery en este (http: // api.jquery.com/jQuery/) y otras conversaciones de StackOverflow, pero ninguna de ellas explica por qué necesitaría un div envoltorio para que se devolvieran los resultados.

¿Alguna idea? Sé que no es un gran problema, pero no quiero tener que hackear una solución cuando pueda encontrar la raíz del problema.

...

TL; DR: seleccione un alcance de jQuery sólo funciona con un div contenedor raro

Fuente

2012-08-01 Zach Wolf

+1 para flip mesa –

inmediata 1 para un redditor volteando mesas. Bienvenido hermano :) –

Cuando pasa un contexto al $(), le pide al selector que busque entre sus descendientes el elemento dado (esto funciona como .find()). Sin su contenedor div, el elemento que está buscando es el elemento de contexto, por lo que su selector no podrá encontrarlo, ya que en su lugar está buscando dentro.

Debe utilizar .filter() lugar, que filtra un conjunto de elementos en lugar de buscar sus descendientes:

var $slides = $(data.responseText).filter('[data-slidesShow="holder"]');

Fuente

2012-08-01 21:38:13 BoltClock

¡Exactamente lo que estaba buscando! Y eso tiene mucho sentido ahora que ha sido explicado, sentí que sería algo así. –

Es necesario utilizar filtro.

$(data.responseText).filter('[data-slidesShow="holder"]')

Las etiquetas html y body se eliminan del navegador dejando su contenido.

Fuente

2012-08-01 21:34:09

jQuery selector no se comporta como se esperaba en el HTML analizado de ajax

Respuesta

Cuestiones relacionadas