jQuery selecciona elementos en el 1er "nivel"

Question

Quiero seleccionar solo los elementos en el primer "nivel".

Ex:

<div id="BaseElement"> 
    <p>My paragraph 0</p> 
    <div> 
    <span>My Span 0</span> 
    <span>My Span 1</span> 
    </div> 
    <span>MySpan 2</span> 
    <span>MySpan 3</span> 
    <p>My paragraph 1</p> 
</div> 

Digamos que tienes el nodo BaseElement.

var Element = $("div#BaseElement"); 

¿Cómo obtengo los nodos solo desde el nodo del elemento base?

$("div#BaseElement span") 

sólo debe ocasionar la inyección MySpan 2 y MySpan 3.

Answer 1

$("#BaseElement").children("span"); 

o

$("#BaseElement > span"); 

Ver jQuery selectors y children().

Answer 2

En la API de jQuery, cuando se refiere a 'descendientes' significa todos los niveles, y cuando se refiere a 'niños' que significa sólo el primer nivel

esto le ayudará a todos los niños de primer nivel (en su ejemplo la primera p, div, 2 vanos, y por último p)

$('#BaseElement > *') 

Answer 3

también se refiere a What is the difference direct descendent (>) vs. descendant in jQuery selectors? para las diferencias entre el espacio y > en selectores. Con espacio igual a find() y > es igual a children(). En otras palabras, los siguientes pares son equivalentes,

$("#BaseElement").children("span"); 
$("#BaseElement > span"); 

que todos los niños, además de sus descendientes:

$("#BaseElement").find("span"); 
$("#BaseElement span");