PDA

View Full Version : Need help with getElementByClassName



sillyfishyboy
Oct 19th, 2009, 12:59 PM
Hiya,
I am trying to cycle through a series of li's all with class=li_on. I know that getElementsByClassName does not work properly with ie (grrr). As a result I have found a number of scripts that will do this cross browser which works fine

(for example http://robertnyman.com/2008/05/27/the-ultimate-getelementsbyclassname-anno-2008/ .)

this script works well, I also hoped that I could use it to target just classes within a specific div with id=newsidx

unfortunately all of my attempts to get an array or divs with class 'li_on' from div with id 'newsidx' does not seem to work. I can get it to work in firefox with

var liArray = document.getElementById("newsidx").getElementsByClassName("li_on");

does anyone have an idea how I can do this so that it also works with ie.

Thanks.

abduraooft
Oct 19th, 2009, 01:07 PM
does anyone have an idea how I can do this so that it also works with ie.
Read http://codingforums.com/showthread.php?t=154727

UndergroundWire
Oct 19th, 2009, 01:09 PM
Use the core library. http://www.sitepoint.com/public/corelib/core.zip

Extract core.js and place in appropriate directory

Then take a look at my question for the code I used to do the same thing
http://www.codingforums.com/showthread.php?t=179988

sillyfishyboy
Oct 19th, 2009, 01:27 PM
Thanks guys,
The difficulty is not getting an array of elements with the specific class name. The problem is getting an array of elements with the specific class name from within a div with a specific id.

On the site I have 2 lists which are both using li_on as the class name for thier li's, I only want to access one of these lists. and because I cannot guarantee how many items the first list will have (dynamic) I cannot just remove these from the array.

abduraooft
Oct 19th, 2009, 01:29 PM
The difficulty is not getting an array of elements with the specific class name. The problem is getting an array of elements with the specific class name from within a div with a specific id. It's a difficulty in IE to get getElementsByClassName(), as it's not implemented there by default. The solutions provided in the link in my above post addresses it well. Guess you haven't followed it.

sillyfishyboy
Oct 19th, 2009, 01:39 PM
thanks abduraooft, Unfortunately I am not quite that competent a coder yet so although I could understand most of it, I couldnt quite figure out how to implement it for my needs. I will give it another read..

12 Pack Mack
Oct 19th, 2009, 01:51 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>None</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

function init(){

var nDiv = document.getElementById('newsidx');
var nLi = nDiv.getElementsByTagName('li');
var nLi_on = [];
for (i=0; i<nLi.length; i++)
{
if (nLi[i].className == "li_on")
{
nLi_on[nLi_on.length] = nLi[i];
}
}
alert(nLi_on.length);
}

navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);

</script>
</head>
<body>
<div id="newsidx">
<ul>
<li>Games:
<ul>
<li class="li_on">
Gin Rummy
</li>
<li class="li_on">
Hearts
</li>
<li class="li_on">
Poker
</li>
<li class="li_on">
Pinochle
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>

abduraooft
Oct 19th, 2009, 01:51 PM
Just add the code given in the post http://codingforums.com/showpost.php?p=766307&postcount=27 into your js file. After that you'd be able to call

var liArray=classes("li_on", document.getElementById("newsidx")); instead of your

var liArray = document.getElementById("newsidx").getElementsByClassName("li_on");

sillyfishyboy
Oct 19th, 2009, 01:58 PM
Thanks abduraooft, much appreciated .. hmm feel like a bit of a fool now trying to do too many things at once and didnt realise that there were multiple pages to the post .. doh.

cheers 12 Pack Mack, I had tried to do exactly that .. but had missed out a couple of important steps .. thanks.