How to get inner div ids from outer div id

**jawainc** · 12-24-2008, 08:14 AM

I am searching for the solution but didn't get any!
so i decided to post it so here's the code. the inner div's ids are generated dynamically, so we didn't know what are the ids . and thats the problem how to get those ids.
heres the example code:

<div id = "parent_id">
<div id = "inner_div_19"></div>
<div id = "inner_div_210"></div>
<div id = "inner_div_11"></div>
<div id = "inner_div_99"></div>
</div>

How to get inner div ids from the parent div id.

**vwphillips** · 12-24-2008, 11:43 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function Test(id){
 var par=document.getElementById(id);
 var clds=par.childNodes;
 for (var z0=0;z0<clds.length;z0++){
  if (clds[z0].nodeName=='DIV'){
   alert(clds[z0].id);
  }
 }


}
/*]]>*/
</script></head>

<body>
<div id = "parent_id">
<div id = "inner_div_19"></div>
<div id = "inner_div_210"></div>
<div id = "inner_div_11"></div>
<div id = "inner_div_99"></div>
</div>
<input type="button" name="" value="Test" onclick="Test('parent_id');"/>
</body>

</html>

**jscheuer1** · 12-24-2008, 02:00 PM

XHTML should almost never be used. The language attribute for the script tag has been deprecated. The childNodes need not be used* since a more convenient object exists - getElementsByTagName('div'):

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function getIds(par){
 par = document.getElementById(par).getElementsByTagName('div');
 for(var a = [], i = 0; i < par.length; ++i)
  a.push(par[i].id || 'has no ID');
 alert(a.join('\n'));
};
</script>
</head>
<body>
<div>
<div id = "parent_id">
<div id = "inner_div_19"></div>
<div id = "inner_div_210"></div>
<div id = "inner_div_11"></div>
<div id = "inner_div_99"></div>
</div>
<input type="button" onclick="getIds('parent_id');" value="Get Id's">
</div>
</body>
</html>

* The childNodes will not pick up nested divisions within the nested divisions though, so depending upon how deep one wants to probe, may be preferred.

**diltony** · 12-24-2008, 07:40 PM

Check out this correction, and compare it with the one u made before!
<html>
<head>
<title>Fixed Already</title>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function Test(id){
var pars=document.getElementById(id).getElementsByTagName("DIV");
for (var z=0;z<pars.length;z++){
alert(pars[z].id);
}
}
/*]]>*/
</script></head>

<body>
<div id = "parent_id">
<div id = "inner_div_19"></div>
<div id = "inner_div_210"></div>
<div id = "inner_div_11"></div>
<div id = "inner_div_99"></div>
</div>
<input type="button" name="" value="Test" onclick="Test('parent_id');"/>
</body>
</html>

**jawainc** · 12-29-2008, 06:44 AM

thanks guys you help me alot. Problem Solved

Thread: How to get inner div ids from outer div id

Thread Tools

Search Thread

How to get inner div ids from outer div id

The Following User Says Thank You to vwphillips For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions