Выберите уровень 1 дочерние элементы

Question

У меня есть следующая структура HTML

<div id="el">
  ...
  <div>
    ... 
    <div class="x"> 
      ...
      <div>
        <div class="x"> 
         ...
        </div> 
      </div>
      ...
    </div>  
    ...
  </div>


</div>

Как я могу выбрать .x корыто #el, но только если оно на первом уровне?

#el > .x это не будет работать, потому что .x может иметь другие родительские элементы: s

Если это невозможно, как я могу игнорировать элементы .x, у которых есть родители определенного класса?

Answer 1

Вы можете сделать два селектора.Один для получения, а другой для отрицания ...

$('#el .x').not('#el .x .x'); 

Это может быть работа.Взгляните: http://jsfiddle.net/hPsY2/

Answer 2

Вы хотели бы использовать команду children () для jQuery, поскольку она перемещается только на 1 уровень ниже.

$ ("# el div"). Children (". X")

Это выберет его правильно.

http://api.jquery.com/children/

Учитывая объект jQuery, который представляет набор элементов DOM, метод .children () позволяет нам осуществлять поиск по ближайшемупотомки этих элементов в дереве DOM и создания нового объекта jQuery из соответствующих элементов.Методы .find () и .children () похожи, за исключением того, что последний перемещается только на один уровень вниз по дереву DOM.Также обратите внимание, что, как и большинство методов jQuery, .children () не возвращает текстовые узлы;чтобы получить все дочерние элементы, включая узлы с текстом и комментариями, используйте .contents ().

Метод дополнительно принимает выражение селектора того же типа, которое мы можем передать в функцию $ ().Если селектор указан, элементы будут отфильтрованы путем проверки их соответствия.

Answer 3

Вы можете создать функцию, которая перебирает все элементы .x внутри #el и возвращает те элементы .x, у которых нет предка с классом x.

Вот рабочая демонстрация: http://jsfiddle.net/6AwcX/

function getTopLevelXElements() {
    var xElements = [];
    $("#el .x").each(function(i, el) {
        if ($(el).parent().closest(".x").length == 0)
          xElements.push(el);
    });
    return $(xElements);
}