CSS исключить каскадные классы - PullRequest
Новая
       33

CSS исключить каскадные классы

0 голосов
/ 07 января 2020

Web Mind Help! У меня html со многими списками выглядит как 

<li>A.</li>
<li><a href="#">B.</a></li>
<li><a class=tr href="#">C.</a></li>
<li class=tr>D.</li>
<li class=notr>E.</li>

Я хочу выбрать все непереведенные innerText 

document.querySelectorAll("li:not(.notr):not(.tr)")

Проблема в том, что если класс TR отсутствует в LI, я не могу его отфильтровать

li:not(.notr):not(.tr)+li>a:not(.tr) - возвращает пустой NodeList

Вроде бы простой вопрос, но я в замешательстве

1 Ответ

1 голос
/ 07 января 2020

Как я уже говорил в комментариях, решение состоит в том, чтобы сначала извлечь эту коллекцию, а затем уточнить результаты, запустив еще один фильтр. 

let rawresult = document.querySelectorAll("li:not(.notr):not(.tr)");

console.log('raw results:');
rawresult.forEach(el => console.log(el.innerText));

let refinedresult = [];
rawresult.forEach(function(el) {if (el.querySelector(".notr,.tr") == null) refinedresult.push(el);});

console.log('refined results:');
refinedresult.forEach(el => console.log(el.innerText));
<ul>
  <li>A.</li>
  <li><a href="#">B.</a></li>
  <li><a class=tr href="#">C.</a></li>
  <li class=tr>D.</li>
  <li class=notr>E.</li>
</ul>
...