How can I get child of loop HTMLCollection?

Question

I'm working with html and in this job I would like get one help from you

Look the following question

I have this 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>

I would to do one loop to get the text from h1 to hide if text is Test 1

I'm trying like this:

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

or

Like this:

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

Or

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

Or

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

The return from

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

Is this

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

UPDATE

Sometimes I tried to use like this, too

<div class="my-class">
    <a class="my-subclass">
      <h1 class="title">Test 2</h1>
   </a>
</div>

 <div class="my-class">
   <a class="my-subclass">
      <h1 class="title">Test 3</h1>
   </a>
 </div>

Thanks for help me

Barmar · Accepted Answer · 2022-08-26 02:21:38Z

2

Use querySelector() to find the class="title" element in the div and test its text.

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">
  <a class="my-subclass">
    <h1 class="title">Test 2</h1>
  </a>
</div>

<div class="my-class">
  <a class="my-subclass">
    <h1 class="title">Test 3</h1>
  </a>
</div>

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

edited Aug 26, 2022 at 2:21

answered Aug 25, 2022 at 23:14

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Andy Over a year ago

I might change the variable name to nodeList to reflect what QSA returns.

Barmar Over a year ago

I've changed it to something that describes it rather than the type

Carlos Over a year ago

If I put console I have this NodeList []

Carlos Over a year ago

Actually my h3 is in <a>

Barmar Over a year ago

Update the question and show the actual HTML.

|

aghashamim · Accepted Answer · 2022-08-25 23:43:03Z

2

// 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>

edited Aug 25, 2022 at 23:43

answered Aug 25, 2022 at 23:35

aghashamim

5863 silver badges9 bronze badges

4 Comments

Carlos Over a year ago

When I put console.log in elementsToHide I have []

Carlos Over a year ago

I tryed in my local, but didnt work

aghashamim Over a year ago

Do you have something different in your local code than the scripts you've posted? Because you could run the snippet and see that it works. Maybe you can provide some additional information and then I could see why?

Carlos Over a year ago

I think it was the position of the script in my html file.

Mister Jojo · Accepted Answer · 2022-08-25 23:35:01Z

1

You can combine everything in querySelectorAll(),
then use 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>

answered Aug 25, 2022 at 23:35

Mister Jojo

22.9k6 gold badges28 silver badges45 bronze badges

Collectives™ on Stack Overflow

How can I get child of loop HTMLCollection?

3 Answers 3

11 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

11 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related