473,320 Members | 2,098 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Grab Elements of DL (2)

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.
Sep 4 '06 #1
8 1564
David wrote:
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[i];
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().

--
Rob
Sep 5 '06 #2
"RobG" wrote:
[..]
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.

Sep 5 '06 #3
David wrote:
"RobG" wrote:
[..]
>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[i].dt);
dds = dts[i].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[i];
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[i].dt);
dds = dts[i].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');">makeDDGrou p()</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>

--
Rob
Sep 5 '06 #4
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.
Sep 5 '06 #5
"David" wrote
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.

Sep 5 '06 #6
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.
Sep 5 '06 #7
David wrote:
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) )
}

--
Rob
Sep 5 '06 #8

"RobG" wrote:
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.
Sep 5 '06 #9

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
by: A.S. | last post by:
Hi, I have the following simple code: <TABLE><TR> <TD BGCOLOR="#FFFFFF" ONCLICK="myform.color.value = this.bgcolor">hello</TD> </TR></TABLE> <FORM ACTION="hello.cgi" NAME="myform"...
6
by: dan glenn | last post by:
hi. I'm having a problem using javasript to pass the value of a textarea (in a form) to a PHP script file. I want to code a 'preview' function into a guestbook entry page, using an HTML link...
8
by: gregory_may | last post by:
Is there a way to grab a "Screen Shot" that includes "Tool Tips"? I saw this code someplace, cant remember where. But it doesnt grab "Tool Tips". Is there a better way to do this in .net?...
24
by: Randall Arnold | last post by:
I know how to use MSHTML to grab the innerhtml from an html web page, but what if I want to look at elements of a rendered aspx page? Is there any way to do this using the MSHTML DOM object? ...
11
by: David | last post by:
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...
4
by: David | last post by:
Is there a way to find which element in an object array the keyword 'this' is acting upon? For example: function doMe(){ var aTags = document.getElementById("list").getElementsByTagName("a");...
1
by: LaughOutLoud | last post by:
Hi. I wonder is it possible to grab everything in a form by calling one javascript function and turns it into array or object? E.g. <form id="form1" name="form1" method="post" action="">...
4
by: Eric Layman | last post by:
HI, Im on dotnet 1.1 I've generated extra checkboxes, textboxes via client side javascript: eg: var inputElement = document.createElement('input'); inputElement.setAttribute('type',...
2
by: dschu012 | last post by:
There are images from the web that are PNG's that I am trying to grab. I seem to be able to grab them however when I do they are not the same size (in bytes) as the image that is stored on the web....
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.