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

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

Так что мне нужно обратное, что делает .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, потому что содержимое каждого из них очень разное.


javascript queryselector
person Toni Michel Caubet    schedule 09.07.2020    source источник
comment
Используйте непосредственный дочерний селектор, т.е. ':scope > .carousel_container__button'   -  person Satpal    schedule 09.07.2020
comment
Боюсь, для вашего случая нет стандартного селектора CSS. Вам придется отфильтровать результат самостоятельно. Например, получите все кнопки, а затем проверьте, является ли ближайший карусельный контейнер контейнером, с которого вы начали поиск.   -  person cloned    schedule 09.07.2020
comment
Что это значит, что содержание очень отличается в каждом? Как отличается? Как вы ожидаете, что мы найдем для вас селектор, когда вы говорите, что я хочу найти случайный элемент в случайной структуре? Что исправлено? На каком основании мы можем попытаться что-то построить? Комментарий Сатпала - самое простое решение того, что вы показали, решение Дэвида также делает то же самое, но вы утверждаете, что они не будут соответствовать вашему реальному случаю ... Объясните нам этот реальный случай.   -  person Kaiido    schedule 09.07.2020
comment
но спасибо насчет :scope ^^   -  person Toni Michel Caubet    schedule 10.07.2020

Ответы (3)


arrow_upward
0
arrow_downward

Нет стандартного селектора для достижения того, что вы хотите, вы должны построить логику самостоятельно. Что-то вроде этого, с помощью === вы можете проверить, совпадают ли два узла 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>

person cloned    schedule 09.07.2020

arrow_upward
0
arrow_downward 

<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 вместо этого.

person David Peer    schedule 09.07.2020
comment
Обратите внимание, что я не могу использовать кнопку ›, потому что содержание сильно отличается в каждом - person Toni Michel Caubet; 09.07.2020
comment
проверьте еще раз, теперь он такой #selector.carousel-container › *.carousel_container__button лучше? - person David Peer; 09.07.2020
comment
Не совсем. Каждая карусель отличается и имеет собственную разметку. - person Toni Michel Caubet; 10.07.2020

arrow_upward

arrow_downward

person    schedule
comment
Обратите внимание, что я не могу использовать кнопку ›, потому что содержание сильно отличается в каждом - person Toni Michel Caubet; 10.07.2020
comment
@toni-michel-caubet Я обновил свой ответ, он даст вам счет без указания элемента для выбора - person Sven.hig; 10.07.2020