Prototype.js: How to find element(s) by class?

[laredotornado]

Hi,

Please let me know if there is a better place to which to post this
message. I'm trying to use prototype.js and wondering how I use it to
find elements on page with class = "myClass"?

Thanks, - Dave

 

[GinnTech]

Hi,

Please let me know if there is a better place to which to post this
message.  I'm trying to use prototype.js and wondering how I use it to
find elements on page with class = "myClass"?

Thanks, - Dave

Just search the groups for prototype. There is a group for it.

And the getElementsByClass was depricated in prototype 1.6 or what
ever the latest is. so if you want to use it you might have to find
an older version.

 

[GinnTech]

Hi,

Please let me know if there is a better place to which to post this
message.  I'm trying to use prototype.js and wondering how I use it to
find elements on page with class = "myClass"?

Thanks, - Dave

you also could do this pretty easily on your own with out prototype
especially if the class is tag specific. Get a collection of tags
that the class is supposed to apply to say <td>. Then loop through
then checking there class value to see if it equals your 'myClass'.

Then do something with it when you find one or store them in an array
to do something with them later.

 

[Dan Evans]

you also could do this pretty easily on your own with out prototype
especially if the class is tag specific.  Get a collection of tags
that the class is supposed to apply to say <td>.  Then loop through
then checking there class value to see if it equals your 'myClass'.

You actually don't want to check if it's just equal. Since you could
have an element like <p class="myClass classtwo"> you would want to
check the indexOf('myClass') != -1 in that string. The problem with
this is that you will get false positives for things like <p
class="myClass2">. There are a couple options here, you could use
regular expressions (haven't really tested this but something like: /
([\w-]+\s+)*myClass(\s+[\w-]+)*/)or you could split on white space and
then iterate over the array which came back. I suspect that regular
expressions are going to be faster.
But if you're concerned with performance then checking to see if the
browser has its own getElementsByClassName method or a querySelector
that it makes public to the JS then you should use those and only
create one for yourself if those are not available. Also smart to
search/keep up on which engines support or have plans to support which
methods.

 

[RobG]

especially if the class is tag specific. Get a collection of tags
that the class is supposed to apply to say <td>. Then loop through
then checking there class value to see if it equals your 'myClass'.

You actually don't want to check if it's just equal. Since you could
have an element like <p class="myClass classtwo"> you would want to
check the indexOf('myClass') != -1 in that string. The problem with
this is that you will get false positives for things like <p
class="myClass2">. There are a couple options here, you could use
regular expressions (haven't really tested this but something like: /
([\w-]+\s+)*myClass(\s+[\w-]+)*/)

A pretty common regular expression is:

/(?:^|\\s+)className(?:\\s+|$)/


and used like:

function hasClass(element, className) {
var re = new RegExp('(?:^|\\s+)' + className + '(?:\\s+|$)');
return re.test(element.className);
}


There is discussion on this in the archives.

 

[jdalton]

@dave

For Prototype you should use $$() or Element.select():
http://www.prototypejs.org/api/utility/dollar-dollar
http://www.prototypejs.org/api/element/select

Examples:
$$('.class-a,.class-b');
$$('div[class~="class-a"]')
$$('td:not(.class-b)');
$(element).select('.class-a');

Many other element methods support css selectors like
Element.up, Element.down, Element.next, Element.previous,
Element.adjacent, Element.match

For Prototype questions and discussions:
http://www.prototypejs.org/discuss

- JDD