PDA

View Full Version : Resolved 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
<!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'):


<!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 :)