By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,568 Members | 1,196 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,568 IT Pros & Developers. It's quick & easy.

Grab elements of DL ( definition List )

P: n/a
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.


Aug 30 '06 #1
Share this Question
Share on Google+
11 Replies


P: n/a
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.

Aug 30 '06 #2

P: n/a
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.

Aug 30 '06 #3

P: n/a
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[i].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.

Aug 30 '06 #4

P: n/a
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[i].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.

Aug 30 '06 #5

P: n/a
"Tom Cole" wrote in message
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.
Aug 30 '06 #6

P: n/a
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.
Aug 30 '06 #7

P: n/a
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.
Aug 30 '06 #8

P: n/a
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>

Aug 30 '06 #9

P: n/a

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;
}
--
Rob

Aug 30 '06 #10

P: n/a
RobG wrote:
[...]
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.
Aug 30 '06 #11

P: n/a
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.
Sep 3 '06 #12

This discussion thread is closed

Replies have been disabled for this discussion.