¿Qué significa un espacio en un selector de jquery?

Question

Me encontré con una reacción que no podía explicar hoy mientras trabajaba con Jquery muy básico hoy y esperaba que uno de ustedes me explicara lo que está ocurriendo para conducir a estos resultados

Así que tengo un modelo DOM (simplificado aquí)

<div class="ObjectContainer"> 
    <div class="Object"> 
     <div>stuff</div> 
    <div class="Object"> 
     <div>stuff</div> 

la idea era establecer un atributo en el último objeto que utiliza este código:

$('div.ObjectContainer').find('div.Object :last').attr("index", "1"); 

ahora entiendo el código aquí era incorrecta y el selector hallazgo adecuada debería ser 'div .Objeto: la st ', pero son los resultados que no entiendo. Cuando ejecuté el primer código de esto ocurrió:

<div class="ObjectContainer"> 
    <div class="Object"> 
     <div index="1">stuff</div> 
    <div class="Object"> 
     <div>stuff</div> 

Podría alguien explicarme cómo mi selector inicial logró establecer un atributo en un nodo hijo?

Answer 1

Los espacios indican la coincidencia con los descendientes. Para cada espacio, está descendiendo (al menos) un nivel y aplicando su selector a los elementos secundarios previamente seleccionados.

Por ejemplo:

div.container.post 

coincidirá con un <div> con los container y post clases, mientras que el siguiente:

div.container .post 

... coincidirá con cualquier elemento con la clase post que descienden de un <div> con una clase de container.

Esto corresponderá con <div class="container"><p class="post"></p></div>, pero también coincidirá con cualquier .post, no importa cuán profundamente anidado es:

<div class="container"> 
    <div> 
    <div> 
     <a class="post"> <!-- matched --> 
    </div> 
    </div> 
</div> 

Puede pensar que es coincidente en etapas: Primeros elementos coincidentes div.container se encuentran, y luego cada uno de esos elementos (y todos sus subelementos) se buscan coincidencias contra .post.

En caso de que eres, div.Object :last primero buscará todos <div> etiquetas con la clase Object, y luego las búsquedas dentro de cada uno de los elementos coincidentes para :last, es decir, cualquier elemento que es el último elemento en su contenedor. Esto se aplica tanto a <div index="1">stuff</div> como a <div>stuff</div>.

Los espacios funcionan exactamente del mismo modo que el encadenamiento de llamadas múltiples al find, por lo que si comprende cómo funciona eso, puede comprender cómo los espacios afectan a un selector.Estos son idénticos:

$('div#post ul.tags li'); 
$('div#post').find('ul.tags').find('li'); 

Answer 2

$('div.ObjectContainer').find('div.Object :last') resulta en un efecto comodín. busca cualquier niño con la clase psudo de: último. Por lo tanto, simplemente eligió div: último. Es equivalente a $('div.ObjectContainer').find('div.Object div:last')

Answer 3

Usando jQuery, se puede encontrar cualquier obj DOM al proporcionar su ID, nombre de la clase, tipo de etiqueta, etc, o simplemente encontrar el padre primero y luego especificar el niño anidado que desea

Para ejemplo, puedes encontrar la primera Div. Objeto de esta consulta

$('.ObjectContainer .Object:first') 

Así que el espacio en el selector de jQuery separa el nodo padre y de los niños