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