0

我有嵌套轮播，我只需要从每个轮播中选择按钮（而不是嵌套轮播中的按钮）

所以我需要相反的.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，因为每个中的内容都非常不同

4

3 回答 3

0 

<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”代替。

于 2020-07-09T11:06:05.767 回答
0

您可以简单地使用document.querySelectorAll('#selector > *') 然后比较您可以使用的元素，因为它是一个选择器，它假定您应该知道接下来要选择哪个元素 luje "#selector > button" 但由于您的目标是通用选择，您可以使用此方法 

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>

于 2020-07-09T12:17:18.107 回答
0

没有标准的选择器来实现你想要的，你必须自己构建逻辑。像这样，===您可以检查两个 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>

于 2020-07-09T11:08:28.640 回答