¿Cuál es la diferencia entre el espacio de jQuery y > selectores?

Question

¿Cuál es la diferencia entre el espacio y > selectores? Y posiblemente relacionado, ¿cómo puedo buscar algo que sea hijo directo de otra cosa, y no bajar la línea descendente?

Answer 1

Para:

<ul>
  <li>Item 1</li>
  <li>Item 2
    <ul>
      <li>Item 2.1</li>
      <li>Item 2.2</li>
    </ul>
  </li>
  <li>Item 3</li>
</ul>

Por ejemplo

$("ul > li").addClass("blah");

agrega clase " blah " a 1 2 y 3 mientras que:

$("ul li").addClass("blah");

agregar clase " blah " a cada elemento de la lista.

No estoy seguro de a qué te refieres con < y? operadores.

Answer 2

En CSS, > significa " hijo directo de " ;: solo se seleccionan los nodos que son hijos directos.

Mientras que un espacio significa '' cualquier descendiente de '': se pueden seleccionar hijos directos e hijos de esos hijos.

Apostaría a que jQuery usa la misma convención.

Answer 3

Como ya se mencionó, un espacio seleccionará cualquier descendiente, mientras que > seleccionará solo los elementos secundarios inmediatos. Si desea seleccionar solo nietos o bisnietos, puede usar esto:

#foo > * > * > .bar

(todos los elementos con clase '' bar '' que son bisnietos del elemento con id '' foo '')

Answer 4

mira esto ..

$(".testit > a") //match the first <a> tag below
$(".testit a") // matches all <a> tag below

<p class="testit">
  <a href="#">All the rules will match this</a>
  <span>
    <a href="#">second rule can only select this</a>
  </span>
</p>