PDA

View Full Version : any alternative to childnodes[] ?

Jahren
06-04-2009, 03:01 PM
hi guys,

I'm relatively new to dom scripting.
i'm coding a search engine in php.
everything is fine. I generate results like this :

<div class='results'>
<div class='result' onclick='toggle_result(this)'>
<div class='1' id='1'>blablabla</div>
<div class='2' id='2'>blabla</div>
</div>

CSS makes class 1 and class 2 display:none.

So whenever someone clicks anywhere in a result div (because there are many with the same name), it should make class 1 and class 2 visible.

The only way I found to do this was using childNodes[] which isn't really a solution..

function toggle_result(obj)
{
if(obj.childNodes[3].style.display != 'block'){
obj.childNodes[3].style.display = 'block';
}
else{
obj.childNodes[3].style.display = 'none';
}

}

isn't there any easier way to achieve this?
I only want a child of the clicked event to be hidden or shown upon click..


thanks for your time.

PS: Also, can anyone tell why it won't work in IE8?
Kor
06-04-2009, 03:13 PM
First at all: classes, ids and names must start with a letter, not with a digit. An id must be unique on document/session.

Second: childNodes() method returns different things in different browsers. So, to avoid an intricate auxiliary nodeValue or nodeName() check solution, better use getElementsByTagName() method

Your particular case:

function toggle_result(obj){
var divs=obj.parentNode.getElementsByTagName('div');
for(var i=1;i<2;i++){
divs[i].style.display=divs[i].style.display!='block'?'block':'none';
}
}
Jahren
06-04-2009, 03:27 PM
thanks for the quick answer!
I used numbers only to simplify the example as i'm french and so i'm using french variables :P

I tried using using obj.getElementById at first to find it isn't possible so I haven't tought about tagname! The thing about your solution is that I need only 2 children on 5 to be toggled.
div a
--div b1
--div b2
--div b3
--div b4 //to toggle
--div b5 //to toggle

I used :
var divs=obj.parentNode.getElementsByTagName('div');

for(var i=3;i<5;i++){
divs[i].style.display=divs[i].style.display!='block'?'block':'none';
}

Is there any elegant way for detecting i'm checking the right div without using numeric constant in the for statement?
abduraooft
06-04-2009, 03:45 PM
You could apply a class for those two divs and use getElementsByClassName() to get them.
btw, the above method is not implemented in older browsers, so you need to add it by your self, see http://www.codingforums.com/showthread.php?t=154727
Jahren
06-04-2009, 04:20 PM
older browser.. you include IE in those older browsers? ;P
This topic sais FF3, opera 9 and chrome
adios
06-04-2009, 04:54 PM
For a reasonably elegant solution you're going to have to post a sample of the exact html generated, with some real-life ids, classes, etc. Otherwise it's difficult to suggest the most coherent approach.
Kor
06-04-2009, 05:44 PM
give the divs to be toggled on/off a class (or add a new class), say class="toToggle". Now:

var divs=obj.parentNode.getElementsByTagName('div'), d, i=0;
while(d=divs[i++]){
if(d.className.match(/toToggle/g){d.style.display=d.style.display!='block'?'block':'none';}
}
adios
06-04-2009, 05:44 PM
Not exactly élégant, but, you get the point ...

<html>
<head>
<style type="text/css">

div.result {
float: left;
margin: 12px 16px;
width: 100px;
background: navy;
color: white;
border: 2px black dashed;
text-align: center;
cursor: pointer;
font-weight: bolder;
}
div.res, div.t_res {
padding: 4px;
font: normal 8pt;
}
div.t_res {
display: none;
}

</style>
<script type="text/javascript">

function toggle_result (obj)
{
var results = obj.getElementsByTagName('DIV')[0];
var n = 0, div, divs = results.getElementsByTagName('DIV');
while (div = divs[n++])
{
if (div.className == 't_res')
{
div.style.display = div.style.display != 'block' ? 'block' : 'none';
}
}
}

</script>
</head>
<body>
<div class="result" onclick="toggle_result(this)">results
<div class="results">
<div class="res" id="b1">b1 b1 b1 b1</div>
<div class="res" id="b2">b2 b2 b2 b2</div>
<div class="res" id="b3">b3 b3 b3 b3</div>
<div class="t_res" id="b4">b4 b4 b4 b4</div>
<div class="t_res" id="b5">b5 b5 b5 b5</div>
</div></div>

<div class="result" onclick="toggle_result(this)">results
<div class="results">
<div class="t_res" id="b1">b1 b1 b1 b1</div>
<div class="res" id="b2">b2 b2 b2 b2</div>
<div class="t_res" id="b3">b3 b3 b3 b3</div>
<div class="res" id="b4">b4 b4 b4 b4</div>
<div class="t_res" id="b5">b5 b5 b5 b5</div>
</div></div>
</body>
</html>
Jahren
06-04-2009, 08:09 PM
thanks for your replies guys.

Iterating works for now.
I can't use the class name match approach as they need to be different. Unless I multi-class them.. But IE doesn't like that.

Is there a way to filter using element name? (does it have to be unique as well?)
Kor
06-04-2009, 09:50 PM
Unless I multi-class them.. But IE doesn't like that.

That is the reason for I have used the RegExp match() method. If your divs have already a class (or more) simply write another:


<div class="oldclass otherclass toToggle">blah</div>


IE has nothing against it, I assure you :)