David wrote:
Here is what I have so far. I can get all of the elements inside of the DL
into an array, how to separate them from here into the groups descibed
before is the pickle.
Get the DL element, traverse the child nodes, store an object for each
new DT that is encountered. The first property is a reference to the
DT, the second property is an array of the sibling DDs until the next
DT.
The following example looks much more comlpex than I think it needs to
be, I'm sure there's a simpler way...
<title>DL Play</title>
<script type="text/javascript">
function makeDTGroups(id){
var dl = document.getElementById(id);
var dtGroup, dtGroups = [];
var dtNum = 0;
var ddNum = 0;
var i = 0;
var node;
var currentDDGroup;
while ( (node = dl.childNodes[i++]) ){
if (1 == node.nodeType){
if ('dt' == node.nodeName.toLowerCase()){
dtGroups[dtNum] = {};
dtGroup = dtGroups[dtNum++];
dtGroup['dt'] = node;
dtGroup['dd'] = [];
currentDDGroup = dtGroup['dd'];
ddNum = 0;
} else if (currentDDGroup &&
'dd' == node.nodeName.toLowerCase()){
currentDDGroup.push(node);
}
}
}
/* dTgroups is an Array of objects of form:
[
{dt : <ref to first dt>,
dd : [ddRef0, ddRef1, ddRef2, ...]
},
{dt : <ref to 2nd dt>,
dd : [ddRef0, ddRef1, ddRef2, ...]
},
...
];
*/
// Now do something with it.
alert( showObj(dtGroups).join('\n'));
// Show the innerHTML of the 2nd DD of the 3rd DT
// remember that they are zero indexed:
alert( dtGroups[2].dd[1].innerHTML );
// Get a reference to the 1st dt element:
alert( dtGroups[0].dt.nodeName );
}
// Does something with the object
function showObj(obj, msg, pad){
var t, nName;
msg = (msg)? msg : [];
pad = ('string' == typeof pad)? pad + '_' : '';
for (var p in obj){
t = pad + p;
if (obj[p].nodeName){
msg.push(t + ' : ref to ' + obj[p].nodeName);
} else {
if (obj[p].constructor.name) {
msg.push(t + ': ' + obj[p].constructor.name);
} else {
msg.push(t + ': ' + typeof obj[p]);
}
showObj(obj[p], msg, pad);
}
}
return msg;
}
</script>
<dl id="dlList">
<dt><a href="#">dt0</a></dt>
<dd><a href="#">dt0dd0</a></dd>
<dd><a href="#">dt0dd1</a></dd>
<dd><a href="#">dt0dd2</a></dd>
<dt><a href="#1">dt1</a></dt>
<dd><a href="#">dt1dd0</a></dd>
<dd><a href="#">dt1dd1</a></dd>
<dt><a href="#1">dt2</a></dt>
<dd><a href="#">dt2dd0</a></dd>
<dd><a href="#">dt2dd1</a></dd>
<dd><a href="#">dt2dd2</a></dd>
<dd><a href="#">dt2dd3</a></dd>
</dl>
<button onclick="makeDTGroups('dlList');">makeDDGroups()</button>