How to loop throug all elements inside a div

Question

I want to loop through all elements which are in a div. I tried it with this code, but it only returns the main/starting div.

What is wrong with this code?

<div id="startcontainer">
  <div>anotherone</div>
  <div>
    one more <span>a span tag<a href="">href tag</a></span>
  </div>

  $('#startcontainer').each(function(index, value){ console.log(index+''+value+'-> id:'+$(this).attr("id")+'
  tag:'+$(this).prop("tagName")); });
</div>

The fastest way would be to not doing that. Why would you add an id to every elements? This is not mandatory for HTML validation — Cid, Jan 31 '19 at 09:26
i will remove this id at the end of all. i need a id for every single element work easier wich every stuff on this site — mikeD, Jan 31 '19 at 09:28
You only need to add an ID or class if you going to perform some task or styling with them , Apart from that there is no reason for you too add an ID — Thanveer Shah, Jan 31 '19 at 09:28
it makes more simple , so i know every element has a id, no need to check if id==undefined or class is undiefined etc. to switch to another selector - i think its a easy way to make it more simple — mikeD, Jan 31 '19 at 09:33
You need to loop the children of `#startcontainer`, not the elements with id `startcontainer`. Try `children()` or `$('#startcontainer div')`. And make sure your markup is valid — aletzo, Jan 31 '19 at 10:57
@aletzo, if i do this $('#startcontainer div') it will loop only throug the divs, i need to loop to every element in this example also throug span, a... Trie with children looks better, but wont match why elements could be unlimited nested inside, so i miss the children of children of chi.... — mikeD, Jan 31 '19 at 11:03

score 0 · Answer 1 · answered Jan 31 '19 at 11:02

0

you have use children https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/children

like this

var foo = document.getElementById('startcontainer');
for (let i = 0; i < foo.children.length; i++) {
  console.log(foo.children[i].tagName);
}

in jquery you can get idea from this https://api.jquery.com/children/

answered Jan 31 '19 at 11:02

Abdullah Khan

649
5
11

hi, thanks, i trie it with children but i only get the frist children, i need all the children wich could unlimited nested - how i can do this? – mikeD Jan 31 '19 at 11:15

Jacob Nelson · Answer 2 · 2019-01-31T11:28:45.020

0

You may have to try it this way.

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div id="startcontainer">
      <div>anotherone</div>
      <div>
        one more <span>a span tag<a href="">href tag</a></span>
      </div>
    </div>
    
    <script>
            $('#startcontainer').children().each(function(index, value){
           console.log(index, " ", value)
        });
        </script>

Reference

edited Jan 31 '19 at 11:28

answered Jan 31 '19 at 11:18

Jacob Nelson

2,370
23
35

hi, yes but i get only the first children, i need all children of unlimited nested elements - what i have to do for getting this? – mikeD Jan 31 '19 at 11:22

score 0 · Accepted Answer · answered Jan 31 '19 at 11:24

0

You need a recursive search, here i made an example.

var foo = document.getElementById('startcontainer');

function search(element){

$(element).children().each(function(index, item){
console.log(item.tagName);
search(item) // Search agen for children, this is recursive search so it will go throw each element and its cheldren
});
}

search(foo)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="startcontainer">
  <div>anotherone</div>
  <div>
    one more <span>a span tag<a href="">href tag</a></span>
  </div>
 </div>

answered Jan 31 '19 at 11:24

Alen.Toma

4,684
2
14
31

thanks a lot, i thought i do it with a simple each() ... – mikeD Jan 31 '19 at 11:36
of course but i'm a neeby i cannot vote up ;-) – mikeD Jan 31 '19 at 11:38

How to loop throug all elements inside a div

3 Answers3