JQuery выбирает элементы на 1-м "уровне"

Я хочу выбрать только элементы на первом "уровне".

Пример:

<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>

Скажем, что вы получили BaseElement node.

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

Как получить узлы только из базового элемента node?

$("div#BaseElement span")

должно привести только к получению MySpan 2 и MySpan 3.

Ответ 1

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

или

$("#BaseElement > span");

Смотрите селектора jQuery и children().

Ответ 2

В jQuery API, когда он относится к "потомкам", он означает все уровни, а когда он относится к "детям", это означает только первый уровень

это даст вам всех детей первого уровня (в вашем примере первый p, div, 2 пролета и последний p)

$('#BaseElement > *')

Ответ 3

Также ссылайтесь на В чем разница с прямым потомком ( > ) и потомком в селекторах jQuery? для различий между пространством и в селекторах. С пространством равно find() и > равен children(). Другими словами, следующие пары эквивалентны,

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

Получить всех детей и их потомков:

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