CODEWITHSUNDEEP
javascript
Doug F
Doug F

Reputation: 13

JavaScript access child element within forEach loop

I'm just starting out with JavaScript although I have used a number of other languages previously. I'm finding the orientation pretty painful and I'd appreciate some guidance on how to access child elements within a forEach loop (or a jQuery .each loop). At this stage I don't really care whether the solution is JS or jQuery, I'm just trying to get something that works.

Say I have a node element that I have found using jQuery and I now have some processing to do on each row, which includes needing to find a child-element whose id contains an index related to the parent node in question:

$('.row').each((index, item) => {
    var name = item.getElementById(`#name-${index}`);
});

It seems that it should be straightforward to select the element using getElementById, but this results in an 'item.getElementById is not a function' error.

I've also tried a jQuery approach:

var name = item.find('#name-0')

this gets an 'item.find is not a function' error.

I don't know if item should be in {} - it's not clear to me when the braces are needed and when they are not, but if I try it with the braces I still get a '.find is not a function' error.

Can someone point out what I'm doing wrong, or even better point me in the right direction of somewhere this is documented. All I can find is very simplistic examples.

Edited to include minimal HTML example: (and amended to fix missing div tags)

<div id="container" class="position-relative col-10>

    <div id="row-0" class="row position-relative">
        <div id="name-0" class="column col-4">User 1</div>
        <div id="score-0" class="column col-2">20</div>
    </div>

    <div id="row-1" class="row position-relative">
        <div id="name-1" class="column col-4">User 2</div>
        <div id="score-1" class="column col-2">10</div>
    </div>

    <div id="row-2" class="row position-relative">
        <div id="name-2" class="column col-4 ">User 3</div>
        <div id="score-2" class="column col-2">5</div>
    </div>

</div>

Upvotes: 1

Views: 5196

Answers (3)

PROGATI School Management Syst
PROGATI School Management Syst

Reputation: 7

<!DOCTYPE html>
<html>
    <body>
        <div id="row">  `This is a parent div and inside there are 4 children`
            <input />
            <input />
            <input />
            <input />
        </div>
        <button type="button" id="button">Click</button>
        <div id="result"></div>
    </body>
</html>
<script>
    var row = document.getElementById("row");     `get the element into a veriable.`
    var button = document.getElementById("button");
    var result = document.getElementById("result");
    var childNodes = row.childNodes;   `Using .childNodes you will get the children of a parent div.`

    button.addEventListener("click", () => {
    let x = 0;
    childNodes.forEach(function (item) {
         x += item;
    });
    result.innerHTML = x;
    });
</script>

Upvotes: 0

0stone0
0stone0

Reputation: 43983

From Why does getElementById not work on elements inside the document element?:

Container IDs should be unique, so there's no reason to find an object by ID within another container. This is why you only need document.getElementById to access any element by its ID, whereas when you are searching by class or tag name, you might want to only search within a specific container, which is why you can do x.getElementsByClassName etc.

So there's no getElementById available on the item.

Recommend using a regular document.getElementById, document.querySelector or an extra Jquery selector like so:

$('.row').each((index, item) => {

  // getElementById
  var name = document.getElementById(`name-${index}`);
  console.log(name.textContent);
  
  // Jquery
  var name2 = $(`#name-${index}`)[0];
  console.log(name2.textContent);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='row'>
  <em id='name-0'>Name 0</em>
  <em id='name-1'>Name 1</em>
</div>

Note; the above is just an example, since OP did not yet added an example html, I've created a simple example.

Upvotes: 0

Sanmeet
Sanmeet

Reputation: 1410

Since you didn't provide us with markup I assumed your markup would look somewhat like below :

HTML

<div class="parent">
  <div class="child">
      <div class="child_child">
        
      </div>
  </div>
  <div class="child">
      <div class="child_child">
        
      </div>
  </div>
</div>
<div class="parent">
  <div class="child1">
      <div class="child_child">
        
      </div>
  </div>
  <div class="child2">
      <div class="child_child">
        
      </div>
  </div>
  
</div>
<div class="parent">
  <div>
      <div class="child_child">
        
      </div>
  </div>
</div>

JS

let parent = document.querySelectorAll('.parent');
parent.forEach((child , index)=>{
    console.log(child.querySelector('.child_child') , index)
})

Upvotes: 2

Related Questions