JS - querySelectorAll, кроме элементов, вложенных в класс - PullRequest
Новая
       51

JS - querySelectorAll, кроме элементов, вложенных в класс

0 голосов
/ 09 июля 2020

У меня есть вложенные карусели, и мне нужно выбрать только кнопки из каждой карусели (а не те, что во вложенных каруселях)

Так что мне нужно обратное, что .closest делает ..

Вот как я пытаюсь 

const container = document.querySelector('#selector');
document.querySelector('span').innerHTML = container.querySelectorAll(':not(.carrousel-container) .carousel_container__button').length
<div class="carrousel-container" id="selector">
   <button class="carousel_container__button">The only one i want</button>
   
   <div class="carrousel-container">
     <button class="carousel_container__button">other carousel button</button>
   </div>
   <div class="carrousel-container">
     <button class="carousel_container__button">other carousel button</button>
   </div>
</div>

<p>Found items: <span></span></p>

Но я всегда получаю 3, и мне нужно выбрать только первый.

Почему :not() недостаточно?

Обратите внимание, что я не могу использовать > button, потому что в каждом

содержимое сильно различается.

Ответы [ 3 ]

0 голосов
/ 09 июля 2020

Не существует стандартного селектора для достижения желаемого, вам нужно создать c logi самостоятельно. Что-то вроде этого, с помощью === вы можете проверить, совпадают ли два узла DOM.

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

const container = document.querySelector('#selector');

let buttons = container.querySelectorAll('.carousel_container__button');

buttons.forEach( (button) => {
  if (button.closest('.carrousel-container') === container) {
    console.log(button); // here we have the correct button, do with it what you want. 
  }
});


document.querySelector('span').innerHTML = container.querySelectorAll(':not(.carrousel-container) .carousel_container__button').length
<div class="carrousel-container" id="selector">
   <button class="carousel_container__button">The only one i want</button>
   
   <div class="carrousel-container">
     <button class="carousel_container__button">other carousel button</button>
   </div>
   <div class="carrousel-container">
     <button class="carousel_container__button">other carousel button</button>
   </div>
</div>

<p>Found items: <span></span></p>
0 голосов
/ 09 июля 2020

Вы можете просто использовать document.querySelectorAll('#selector > *'), а затем сравнить элементы, которые вы могли бы использовать, потому что это селектор, который предполагает, что вы должны знать, какой элемент следующим вы хотите выбрать luje "#selector> button", но поскольку вы стремитесь к общему c выбор можно использовать этим методом 

const container = document.querySelectorAll('#selector > *')
counter=1
Array.from(container).reduce((el,sec)=>{
  if(el.tagName==sec.tagName){
counter++;
return sec}
else return false})
document.querySelector('span').innerHTML = counter
<div class="carrousel-container" id="selector">
  <button class="carousel_container__button">The only one i want</button>
  
  <div class="carrousel-container">
    <button class="carousel_container__button">other carousel button</button>
  </div>
  <div class="carrousel-container">
    <button class="carousel_container__button">other carousel button</button>
  </div>
</div>

<p>Found items: <span></span></p>
0 голосов
/ 09 июля 2020 

<div class="carrousel-container" id="selector">
   <button class="carousel_container__button">The only on i want</button>
   
   <div class="carrousel-container">
     <button class="carousel_container__button">other carousel button</button>
   </div>
   <div class="carrousel-container">
     <button class="carousel_container__button">other carousel button</button>
   </div>
</div>

<p>Found items: <span></span></p>
<script>
const container = document.querySelector('#selector');
document.querySelector('span').innerHTML = container.querySelectorAll('#selector.carrousel-container > *.carousel_container__button').length
</script>

как это? вместо "# selector.carrousel-container> * .carousel_container__button".

...