Jquery: как получить все вложенные элементы, кроме тех, у кого определённый класс

294
23 марта 2017, 20:45

Как получить все вложенные элементы, кроме тех, у кого определённый класс?

<div class="model-A">
  <div>asda</div>
    <div class="some1">a
        <div class="sub1">a</div>
        <div class="model-B">b
            <div class="some2">b
                <div class="sub2">b</div>
            </div>            
            <div class="some2">b
                <div class="sub2">b</div>
            </div>
        </div>
    </div>
</div>

Например, необходимо получить всё, кроме элемента с классом model-B, или, если быть точнее, надо получить все элементы внутри элемента с классом model-N, где N может быть любым.

Элемент <div class="model-B">...</div> получается вложенным, получается при запросе model-A он должен отсутствовать в выборке.

Иначе можно вопрос сформулировать так: получить все элементы, ближайший родитель которых имеет класс model-N.

Чувствую, что решение находится в комбинированном применении селекторов has|not, но мне не удалось добиться результата.

Answer 1

Вроде простой вопрос, а нет нормального решения, создал своё:

$.fn.filterWithChildren = function filterWithChildren(selector) { 
  let elements = this; 
 
  // Пробегаемся по всем нодам 
  elements.each((i, el) => { 
    let item = $(el); 
 
    // Если текущий элемен подходит под селектор 
    if (!el.matches(selector)) 
      // То уничтожаем его и, главное, потомков 
      elements.splice(i, 1); 
    else{ 
      // Если у очередной ноды есть потомки 
      if(item.children().length){ 
        // Рекурсивно обходим потомков и добавляем очищенные ноды в результат 
        elements = elements.add(filterWithChildren.call(item.children(), selector)); 
      } 
    } 
  }); 
 
  // Возвращаем jQuery-объект, можем продолжить чейнинг 
  return elements; 
} 
 
// Точка входа 
let e = $('.model-A'); 
 
// Подсветим все ноды, кроме .model-B и потомков 
e.filterWithChildren(':not(.model-B)').css({background: 'lightgreen'});
/* 
Подсветим фон для .mode-B и его потомков 
Если будут найдены эти ноды, то inline-стиль перекроет и покажет своё 
*/ 
.model-B, .model-B *{ 
  background: lightblue; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="model-A"> 
  <div>asda</div> 
  <div class="some1">a 
    <div class="sub1">a</div> 
    <div class="model-B">b 
      <div class="some2">b 
        <div class="sub2">b</div> 
      </div> 
      <div class="some2">b 
        <div class="sub2">b</div> 
      </div> 
    </div> 
  </div> 
</div>

READ ALSO
Как сохранить cookie

Как сохранить cookie

При загрузки главной страницы mainpagecom срабатывает анимация $("header")

269
Как масштабировать верстку

Как масштабировать верстку

Есть готовая верстка, width-1920 height-4800 responsiv верстка как в макетеЗаказчику не нравится, что на его мониторе все выглядит большим и требует уменьшить...

220
Смещение SVG при анимации в Mozilla

Смещение SVG при анимации в Mozilla

ЗдравствуйтеПодскажите, пожалуйста, с проблемой

205
Адаптивная верстка на три блока

Адаптивная верстка на три блока

Нужно такое сформировать:

227