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.getElementById("dlList"); // the parent...

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

for (var i = 0; i < dts.length; i++) {
var dds = dts.getElementsByTagName("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.getElementById("dlList"); // the parent...

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

for (var i = 0; i < dts.length; i++) {
var dds = dts.getElementsByTagName("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.getElementById("dlList"); // the parent...

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

for (var i = 0; i < dts.length; i++) {
var dds = dts.getElementsByTagName("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.getElementsByTagName("a");
// var href = anchor.href;
}
}

//the end.

 

[Tom Cole]

Using DOM:

var root = document.getElementById("dlList"); // the parent...

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

for (var i = 0; i < dts.length; i++) {
var dds = dts.getElementsByTagName("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.getElementsByTagName("a");
// var href = anchor.href;
}
}

//the end.

 

[David]

Using DOM:

var root = document.getElementById("dlList"); // the parent...

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

for (var i = 0; i < dts.length; i++) {
var dds = dts.getElementsByTagName("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]

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>

 

[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.getElementById(id).firstChild;
var nodeName;
var dts = [];
var dtNum = 0;
var ddGroup;
do {
if (1 == node.nodeType){
nodeName = node.nodeName.toLowerCase();
if ('dt' == nodeName){
dts.push({dt:node, dd: []});
ddGroup = dts[dtNum++].dd;
} else if (ddGroup && 'dd' == nodeName){
ddGroup.push(node);
}
}
} while( (node = node.nextSibling) )
return dts;
}

 

[David]

[...]
A bit more concise:

function makeDTGroup(id){
var node = document.getElementById(id).firstChild;
var nodeName;
var dts = [];
var dtNum = 0;
var ddGroup;
do {
if (1 == node.nodeType){
nodeName = node.nodeName.toLowerCase();
if ('dt' == nodeName){
dts.push({dt:node, dd: []});
ddGroup = dts[dtNum++].dd;
} else if (ddGroup && 'dd' == nodeName){
ddGroup.push(node);
}
}
} while( (node = node.nextSibling) )
return dts;
}

The first example works well. I haven't been able to plugu in the second
example with the showObj() function yet. I need to decipher what you have
done here

Now I need to look at this to understand the methods you used.

David J.

 

[David]

RobG wrote:
[...]

A bit more concise:
function makeDTGroup(id){
var node = document.getElementById(id).firstChild;

[...]

Continuing on with this, your modified code works well, however I have come
accross having to process multiple DLs instead of just one with an "id". I
pretty much understand how your code works, not completely but I see what's
going on.

I have succeeded in grabbing the DLs by a unique class name, however getting
the elements into arrays after this seems problematic. I know this is
possible. I have put up a link to what I have. Any suggestions/pointers/push
are welcome in where I am failing in the method.

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

David J.