Grab elements of DL ( definition List )

[David]

Hi Everyone,

I'm trying to grab all of the elements of a DL, specifically the <a href>'s
grouping them by the DD's. I suppose if I can just get them into groups I
can get the href's later. The hard part is getting them grouped as explained
below.

For example...

<dl id="dlList">
<dt><a href="#2">DT Item1<span>(1)</span></a></dt>
<dd><a href="#">DD Item1<span>(2)</span></a></dd>
<dd><a href="#">DD Item2<span>(1)</span></a></dd>
<dd><a href="#">DD Item3<span>(1)</span></a></dd>

<dt><a href="#1">DT Item1<span>(1)</span></a></dt>
<dd><a href="#">DD Item1<span>(1)</span></a></dd>
<dd><a href="#">DD Item2<span>(1)</span></a></dd>
</dl>

Is there a way to say, loop through the DL until it finds a DT. Whe it finds
one, grab it and all of the DD's that immediately follow it .. until it
comes to another DT. Group it with its DD's and continue until no more DT's
are found.

Then maybe take these collections and possibly populate an array with the
groups?

I really don't know how to go about this.

David J.

[Tom Cole]

Using DOM:

var root = document.getEle mentById("dlLis t"); // the parent...

var dts = root.getElement sByTagName("dt" ); // the dt's in the list...

for (var i = 0; i < dts.length; i++) {
var dds = dts.getElements ByTagName("dd") ; // the dd's of the dt...
for (var j = 9; j < dds.length; j++) {
var dd = dds[j];
//do stuff with your dd...
}
}

//the end.

[Tom Cole]

Using DOM:

var root = document.getEle mentById("dlLis t"); // the parent...

var dts = root.getElement sByTagName("dt" ); // the dt's in the list...

for (var i = 0; i < dts.length; i++) {
var dds = dts.getElements ByTagName("dd") ; // the dd's of the dt...
for (var j = 0; j < dds.length; j++) {
var dd = dds[j];
//do stuff with your dd...
}
}

//the end.

[Tom Cole]

Using DOM:

var root = document.getEle mentById("dlLis t"); // the parent...

var dts = root.getElement sByTagName("dt" ); // the dt's in the list...

for (var i = 0; i < dts.length; i++) {
var dds = dts[i].getElementsByT agName("dd"); // the dd's of each
dt...
for (var j = 9; j < dds.length; j++) {
var dd = dds[j];
//do stuff with your dd...
//for example...var anchor = dd.getElementsB yTagName("a");
// var href = anchor.href;
}
}

//the end.

[Tom Cole]

Using DOM:

var root = document.getEle mentById("dlLis t"); // the parent...

var dts = root.getElement sByTagName("dt" ); // the dt's in the list...

for (var i = 0; i < dts.length; i++) {
var dds = dts[i].getElementsByT agName("dd"); // the dd's of each
dt...
for (var j = 0; j < dds.length; j++) {
var dd = dds[j];
//do stuff with your dd...
//for example...var anchor = dd.getElementsB yTagName("a");
// var href = anchor.href;
}
}

//the end.

[David]

"Tom Cole" wrote in message

Using DOM:

var root = document.getEle mentById("dlLis t"); // the parent...

var dts = root.getElement sByTagName("dt" ); // the dt's in the list...

for (var i = 0; i < dts.length; i++) {
var dds = dts.getElements ByTagName("dd") ; // the dd's of the dt...
for (var j = 9; j < dds.length; j++) {
var dd = dds[j];
//do stuff with your dd...
}
}

//the end.

I don't think that will work, because the DDs aren't nested inside of the
DLs like most HTML tags are, so the length comes up 0 for each one.

David J.

[David]

It's as if you need to loop through the DL until you find a DT. When you do,
grab it and all of the following DDs until the next DT is found. When the
nex DT is found, put all that was just found into a collection of sorts ( an
array entry possibly for use later ) and continue onto the next DT and its
DDs until it comes upon another DT ( until it doesn't ).

David J.

[David]

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.

http://mysite.verizon.net/microweb2/list.html

David J.

[RobG]

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.getEle mentById(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.t oLowerCase()){
dtGroups[dtNum] = {};
dtGroup = dtGroups[dtNum++];
dtGroup['dt'] = node;
dtGroup['dd'] = [];
currentDDGroup = dtGroup['dd'];
ddNum = 0;
} else if (currentDDGroup &&
'dd' == node.nodeName.t oLowerCase()){
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(dtGroup s).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.na me) {
msg.push(t + ': ' + obj[p].constructor.na me);
} 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="makeDT Groups('dlList' );">makeDDGroup s()</button>

[RobG]

RobG wrote:
[...]

The following example looks much more comlpex than I think it needs to
be, I'm sure there's a simpler way...

A bit more concise:

function makeDTGroup(id) {
var node = document.getEle mentById(id).fi rstChild;
var nodeName;
var dts = [];
var dtNum = 0;
var ddGroup;
do {
if (1 == node.nodeType){
nodeName = node.nodeName.t oLowerCase();
if ('dt' == nodeName){
dts.push({dt:no de, dd: []});
ddGroup = dts[dtNum++].dd;
} else if (ddGroup && 'dd' == nodeName){
ddGroup.push(no de);
}
}
} while( (node = node.nextSiblin g) )
return dts;
}
--
Rob