如何獲得循環 HTMLCollection 的子節點？

Question

伙計們！

我正在與 html 合作，在這份工作中，我想得到你的幫助

看下面的問題

我有這個 div

 <div class="my-class"> <h1 class="title">Test 1</h1> </div> <div class="my-class"> <h1 class="title">Test 2</h1> </div> <div class="my-class"> <h1 class="title">Test 3</h1> </div> <div class="my-class"> <h1 class="title">Test 4</h1> </div>

如果文本是Test 1 ，我會做一個循環來從 h1 中獲取文本以隱藏

我正在嘗試這樣：

var htmlCollection = document.getElementsByClassName('my-class')
console.log(htmlCollection);
Array.prototype.slice.call(htmlCollection).forEach(element => {
 console.log(element);
});

或者

像這樣：

var htmlCollection = document.getElementsByClassName('bs-media-item-card-array-1')
var BoxArray = Array.from(htmlCollection);
console.log(BoxArray);

或者

var htmlCollection = document.getElementsByClassName('bs-media-item-card-array-1')
for(index of htmlCollection){
  console.log(index);
}

或者

for(index in htmlCollection){
   if(index <= htmlCollection.length) {
       console.log(htmlCollection[index]);
    }
 }

從返回

var htmlCollection = document.getElementsByClassName('my-class')

這是

HTMLCollection []
0: div.my-class
1: div.my-class
2: div.my-class
3: div.my-class
length: 4
[[Prototype]]: HTMLCollection

謝謝你幫助我

Answer 1

使用querySelector()在 div 中查找class="title"元素並測試其文本。

 var divs = document.querySelectorAll('.my-class') divs.forEach(div => { if (div.querySelector(".title").innerText == 'Test 1') { div.classList.add('hidden'); } })

 .hidden { display: none; }

 <div class="my-class"> <h1 class="title">Test 1</h1> </div> <div class="my-class"> <h1 class="title">Test 2</h1> </div> <div class="my-class"> <h1 class="title">Test 3</h1> </div> <div class="my-class"> <h1 class="title">Test 4</h1> </div>

Answer 2

您可以結合querySelectorAll()中的所有內容，
然后使用element.closest()

 document.querySelectorAll('div.my-class > h1.title').forEach( elm => { if (elm.textContent.includes('Test 1')) elm.closest('div.my-class').classList.add('noDisplay') })

 .noDisplay { display: none; }

 <div class="my-class"> <h1 class="title">Test 1</h1> </div> <div class="my-class"> <h1 class="title">Test 2</h1> </div> <div class="my-class"> <h1 class="title">Test 3</h1> </div> <div class="my-class"> <h1 class="title">Test 4</h1> </div>

Answer 3

 // Get all the h1 elements with a class of title inside elements with a class of my-class and filter the ones where the text is Test 1 const elementsToHide = [...document.querySelectorAll('div.my-class > h1.title')].filter(node => node.innerText === 'Test 1'); //Hide them elementsToHide.forEach(h1 => h1.classList.add('hide'));

 .hide { display: none; }

 <div class="my-class"> <h1 class="title">Test 1</h1> </div> <div class="my-class"> <h1 class="title">Test 2</h1> </div> <div class="my-class"> <h1 class="title">Test 3</h1> </div> <div class="my-class"> <h1 class="title">Test 4</h1> </div>