querySelectorAll () соответствует всем h1, кроме div - PullRequest
Новая
       7

querySelectorAll () соответствует всем h1, кроме div

1 голос
/ 31 мая 2019

Я хочу сопоставить все h1 в документе, кроме div, содержащего другие h1, в настоящее время я могу сделать querySelectorAll('h1:not(.demo)), чтобы получить все h1, кроме h1с демо-классом.

Но как я могу сделать querySelectorAll('h1:not(div#demo)) или подобную вещь?

Ниже приведен пример HTML 

<body>
  <div><h1>First</h1> <h1>Second</h1></div>
  <div id="demo"><h1 class="demo">Third</h1></div>
  <div><h1>Fourth</h1></div>
<body>

Ответы [ 4 ]

1 голос
/ 31 мая 2019

либо это будет работать 

 document.querySelectorAll('div:not(#demo) h1')

или это 

document.querySelectorAll('h1:not(.demo)')

если вы хотите нацелиться на все h1 , где нет атрибута класса, вы можете сделать это так 

document.querySelectorAll('h1:not([class])')

Подробнее о 101 : не

0 голосов
/ 31 мая 2019

Вы можете исключить div из коллекции следующим образом: ':not(div) > h1': 

var s = document.querySelectorAll(':not(div) > h1');
[...s].forEach((el) => el.innerHTML += ' changed');
<div >
      <h1>h inside div 1</h1>
</div>
<h1>h outside div 1</h1>
<div id="d2">
      <h1>h inside div 2</h1>
</div>
<h1>h outside div 2</h1>

Вы можете установить селектор ':not(#demo) > h1', тогда все h1 будут обработаны, кроме тех, которые внутри #demo: 

var s = document.querySelectorAll(':not(#demo) > h1');
[...s].forEach((el) => el.innerHTML += ' changed');
<div >
      <h1>h inside div 1</h1>
</div>
<h1>h outside div 1</h1>
<div id="demo">
      <h1>h inside div #demo</h1>
</div>
<h1>h outside div demo</h1>
0 голосов
/ 31 мая 2019

Вы можете выбрать дочерние заголовки из divs с помощью >h1

let h1 = document.querySelectorAll('div:not(#demo)>h1');

console.log(h1);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div><h1>First</h1> <h1>Second</h1></div>
<div id="demo"><h1 class="demo">Third (demo)</h1></div>
<div><h1>Fourth</h1></div>
0 голосов
/ 31 мая 2019

Сначала вы можете получить все элементы div , за исключением , которые вы хотите сопоставить, а затем запустить селектор запросов из них: 

const divsWhichArentDemo = document.querySelectorAll('div:not(#demo)');
const h1sWhichArentInDemoDivs = Array.prototype.slice.call(divsWhichArentDemo)
  .map(div => Array.prototype.slice.call(div.querySelectorAll('h1')))
  .flat();
  

console.dir(h1sWhichArentInDemoDivs);
<div>
  <h1>First</h1>
  <h1>Second</h1>
</div>
<div id="demo">
  <h1 class="demo">Third</h1>
</div>
<div>
  <h1>Fourth</h1>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...