Как правильно употребить псевдоселектор not?

Question

[krll-k]

<div class="list">
  <div class="el">
    <div class="ad"></div>
  </div>
  <div class="el"></div>
  <div class="el"></div>
  <div class="el"></div>
  <div class="el"></div>
</div>

Как получить список элементов без того у которого есть в дочернем элемент с классом ad?

document.querySelectorAll('.list .el')
//вернет все 5
document.querySelectorAll('.list .el:not(.ad)')
//вернет все 5

Answer 1

[Алексей Захаров]

можно так

var arr = Array.prototype.filter.call(document.querySelectorAll('.list .el'), function(item) {
	return item.querySelectorAll('.ad').length === 0;
});

Comments

[krll-k]

!== только

[Алексей Захаров]

krll-k: все правильно в решении

Answer 2

[krll-k]

использовать not так как мне бы этого хотелось не получиться, потому:
jq мне нельзя, только на чистом js:

var els = [];
[].forEach.call(document.querySelectorAll('.list .el'),function(item){
  if(item.querySelectorAll('.ad').length != 1){
    els.push(item)
  }
})
console.log(els)

Способ рабочий, но возможно существует изящнее

Comments

[lemme]

var els = [].filter.call(document.querySelectorAll('.list .el'), function(item) {
  return !item.querySelectorAll('.ad').length
})

[krll-k]

lemme: или через map, да

Answer 3

[Lumore]

jquery
$('.list .el').child().not('.ad');
Либо ваш пример:

<div class="list">
  <div class="el ad"></div>
  <div class="el"></div>
  <div class="el"></div>
  <div class="el"></div>
  <div class="el"></div>
</div>

document.querySelectorAll('.list .el:not(.ad)')

Comments

[krll-k]

читер? используя мою разметку попробуй применить not

[Сергей delphinpro]

krll-k: а попробуйте отверткой гвоздь забить. Этот селектор работает так как должен, а не так, как предполагаете )

[Сергей delphinpro]

krll-k: В вашем случае нужен родительский селектор, который еще только обсуждается и не факт, что вообще появится в спецификации.

[Сергей delphinpro]

А, нет, сорри, поторопился. Вам нужен селектор на основе содержимого
Вот этот caniuse.com/#search=%3Ahas
Но как видите, он нигде не поддерживается
А было бы так

document.querySelectorAll('.list .el:has(.ad)')

[Ярослав Иванов]

Сергей: has в jquery есть.

[Сергей delphinpro]

Ярослав Иванов: точно