Grab Elements of DL (2)

[David]

I wonder if someone could tell me where I am going wrong with this script.
The original implementation of finding a DL list and separating it by dt |
dd groups and making new DL's from them worked good. It found only one DL by
getElementById.

The problem I am having is now to process multiple lists in which are found
now by a unique class name on the DL instead of getElementById and only
processing one DL. I'm not really sure how to explain where I am going wrong
but here is the code.

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

Where am I going wrong here?

David J.

 

[RobG]

I wonder if someone could tell me where I am going wrong with this script.
The original implementation of finding a DL list and separating it by dt |
dd groups and making new DL's from them worked good. It found only one DL by
getElementById.

The problem I am having is now to process multiple lists in which are found
now by a unique class name on the DL instead of getElementById and only
processing one DL. I'm not really sure how to explain where I am going wrong
but here is the code.

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

Where am I going wrong here?

You have munged the original code somewhat, as far as I can tell you
want to only add dl's that have a certain class name. In that case,
modify the original makeDTGroup function to accept a reference to a DL
and an object, then have it add the dt/dd groups to the object.

The addDLsByClassName function can be something like:

function addDLsByClassName( className ){
var dl, dls = document.getElementsByTagName('dl');
var dts = [];

// Using a regular expression like this allows you to pass
// the className to the function rather than hard code it
var re = new RegExp('\\b' + className + '\\b');

for (var i=0, len=dls.length; i<len; i++){
dl = dls;
if (re.test(dl.className)) {
addDTGroups(dl, dts);
}
}
// for debug, call previously posted showObj function
// alert( showObj(dts).join('\n') );
}

And the previously posted makeDTGroup function is changed slightly to:

function addDTGroups(dl, dts){
var node = dl.firstChild;
var nodeName;
if ('object' != typeof dts) 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) )
}


Note that addDTGroups() doesn't return anything, it just modifies the
existing dts object passed to it from addDLsByClassName().

 

[David]

:
[..]

You have munged the original code somewhat, as far as I can tell you want
to only add dl's that have a certain class name. In that case, modify the
original makeDTGroup function to accept a reference to a DL and an object,
then have it add the dt/dd groups to the object.

The addDLsByClassName function can be something like:

function addDLsByClassName( className ){
var dl, dls = document.getElementsByTagName('dl');
var dts = [];

// Using a regular expression like this allows you to pass
// the className to the function rather than hard code it

[..]

Well, lol, that part of the script was actually working .. I had your
script picking up multiple dl's only by thier class name with a simple
regExp within the script. The problem is processing this data to the page. I
test it, I get the alerts indicating the groups are collected but...

I can't seem to separate the collected groups and make them appendChild to
re-create them as separate dl's. I'm losing it at that point, where it
re-creates them by the appendChild. I can only get it to process one group.
I'm failing to see how these groups are, well... grouped

David J.

 

[RobG]

:
[..]

You have munged the original code somewhat, as far as I can tell you want
to only add dl's that have a certain class name. In that case, modify the
original makeDTGroup function to accept a reference to a DL and an object,
then have it add the dt/dd groups to the object.

The addDLsByClassName function can be something like:

function addDLsByClassName( className ){
var dl, dls = document.getElementsByTagName('dl');
var dts = [];

// Using a regular expression like this allows you to pass
// the className to the function rather than hard code it

[..]

Well, lol, that part of the script was actually working .. I had your
script picking up multiple dl's only by thier class name with a simple
regExp within the script. The problem is processing this data to the page. I
test it, I get the alerts indicating the groups are collected but...

I can't seem to separate the collected groups and make them appendChild to
re-create them as separate dl's. I'm losing it at that point, where it
re-creates them by the appendChild. I can only get it to process one group.
I'm failing to see how these groups are, well... grouped

It creates an Array object whose elements are objects. Each of those
has two properties: one named 'dt' whose value is a reference to a dt
element. The other is named 'dd' whose value is an array. The elements
of that array are references to the dd's below the dt.

i.e.

[
{ dt : <reference to dt element>
dd : [ <reference to dd element>, <reference to dd element>,..]
},
{ dt : <reference to dt element>
dd : [ <reference to dd element>, <reference to dd element>,..]
}
]

A function to move them to a separate div would be:

function addDTElements(dts, id){
var tgt = document.getElementById(id);
var dds, dl;
for (var i=0, len=dts.length; i<len; i++){
dl = document.createElement('dl');
dl.appendChild(dts.dt);
dds = dts.dd;
for (var j=0, len2=dds.length; j<len2; j++){
dl.appendChild(dds[j]);
}
tgt.appendChild(dl);
}
}

Where dts is the array containing the dts and dds and id is the id of
the div element to move them to. Of course if that's all you want to
do, you might consider dispensing with the intermediate object and just
move the dts & dds there in the first place. Below is a full example of
the above.



<title>Lists</title>
<script type="text/javascript">

function addDLsByClassName( className ){
var dl, dls = document.getElementsByTagName('dl');
var dts = [];
var re = new RegExp('\\b' + className + '\\b');

for (var i=0, len=dls.length; i<len; i++){
dl = dls;
if (re.test(dl.className)) {
addDTGroups(dl, dts);
}
}
addDTElements(dts, 'targetDiv');
}

function addDTGroups(dl, dts){
var node = dl.firstChild;
var nodeName;
if ('object' != typeof dts) 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) )
}


function addDTElements(dts, id){
var tgt = document.getElementById(id);
var dds, dl;
for (var i=0, len=dts.length; i<len; i++){
dl = document.createElement('dl');
dl.appendChild(dts.dt);
dds = dts.dd;
for (var j=0, len2=dds.length; j<len2; j++){
dl.appendChild(dds[j]);
}
tgt.appendChild(dl);
}
}

</script>

<div id="content">
<button onclick="addDLsByClassName('DLclass');">makeDDGroup()</button>

<dl class="DLclass">
<dt><a href="#">DL1 dt0</a></dt>
<dd><a href="#">DL1 dt0dd0</a></dd>
<dd><a href="#">DL1 dt0dd1</a></dd>
<dd><a href="#">DL1 dt0dd2</a></dd>

<dt><a href="#1">DL1 dt1</a></dt>
<dd><a href="#">DL1 dt1dd0</a></dd>
<dd><a href="#">DL1 dt1dd1</a></dd>
</dl>

<!-- These ones don't get moved 'cos of the changed class name -->
<dl class="notDLclass">
<dt><a href="#">DL2 dt0</a></dt>
<dd><a href="#">DL2 dt0dd0</a></dd>
<dd><a href="#">DL2 dt0dd1</a></dd>

<dt><a href="#1">DL2 dt1</a></dt>
<dd><a href="#">DL2 dt1dd0</a></dd>
<dd><a href="#">DL2 dt1dd1</a></dd>
</dl>

</div>

<div id="targetDiv" style="border:1px solid red"></div>

 

[David]

RobG wrote:
[..]

It creates an Array object whose elements are objects. Each of those has
two properties: one named 'dt' whose value is a reference to a dt element.
The other is named 'dd' whose value is an array. The elements of that
array are references to the dd's below the dt.

Where dts is the array containing the dts and dds and id is the id of the
div element to move them to. Of course if that's all you want to do, you
might consider dispensing with the intermediate object and just move the
dts & dds there in the first place. Below is a full example of the above.

[..]

I like the idea of moving the elements to a div. It does work other than
moving the dd's of the 2nd dl get pushed onto the first one if both dl's
have the class name.

David J.

 

[David]

I like the idea of moving the elements to a div. It does work other than
moving the dd's of the 2nd dl get pushed onto the first one if both dl's
have the class name.

The script works as prescribed for one dl with the className. It needs to be
able to process multiple lists with the same className not just one. That is
the biggest problem, doing multiple lists. With your help I have been able
to get one working but not more than that.

By the way, I really appreciate your knowledge and help on this. I'm
beginning to understand the methods you are using.

David J.

 

[David]

I suppose to be more exact, the objective is to look on the page for any dl
that has the className.

Then, for each dl it finds with this className, grab each dt and its
immediate dd's and make a new dl out of all of these groups.


David J.

 

[RobG]

I suppose to be more exact, the objective is to look on the page for any dl
that has the className.

Then, for each dl it finds with this className, grab each dt and its
immediate dd's and make a new dl out of all of these groups.

The addDTGroups function should have been modified as follows:

function addDTGroups(dl, dts){
var node = dl.firstChild;
var nodeName;
if ('object' != typeof dts) dts = [];

// This line isn't needed anymore, so delete it
// var dtNum = 0;

var ddGroup;
do {
if (1 == node.nodeType){
nodeName = node.nodeName.toLowerCase();
if ('dt' == nodeName){
dts.push({dt:node, dd: []});

// This line should be replaced with the following line
// ddGroup = dts[dtNum++].dd;

ddGroup = dts[dts.length-1].dd;
} else if (ddGroup && 'dd' == nodeName){
ddGroup.push(node);
}
}
} while( (node = node.nextSibling) )
}

 

[David]

The addDTGroups function should have been modified as follows:

function addDTGroups(dl, dts){
var node = dl.firstChild;
var nodeName;
if ('object' != typeof dts) dts = [];

// This line isn't needed anymore, so delete it
// var dtNum = 0;

var ddGroup;
do {
if (1 == node.nodeType){
nodeName = node.nodeName.toLowerCase();
if ('dt' == nodeName){
dts.push({dt:node, dd: []});

// This line should be replaced with the following line
// ddGroup = dts[dtNum++].dd;

ddGroup = dts[dts.length-1].dd;
} else if (ddGroup && 'dd' == nodeName){
ddGroup.push(node);
}
}
} while( (node = node.nextSibling) )
}

Duh, yes that works perfectly You amaze me... Thank you very much for
your help with this.

David J.