By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,377 Members | 1,665 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,377 IT Pros & Developers. It's quick & easy.

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

P: n/a
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
Aug 12 '08 #1
Share this Question
Share on Google+
5 Replies


P: n/a
On Aug 12, 1:12*pm, laredotornado <laredotorn...@zipmail.comwrote:
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.
Aug 12 '08 #2

P: n/a
On Aug 12, 1:12*pm, laredotornado <laredotorn...@zipmail.comwrote:
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.
Aug 12 '08 #3

P: n/a
On Aug 12, 10:22*am, GinnTech <Tim.Dale.G...@gmail.comwrote:
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.

--
Dan

Aug 13 '08 #4

P: n/a
On Aug 14, 7:48 am, Dan Evans <TheDanEv...@gmail.comwrote:
On Aug 12, 10:22 am, GinnTech <Tim.Dale.G...@gmail.comwrote: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-]+)*/)
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.
--
Rob
Aug 14 '08 #5

P: n/a
@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
Aug 16 '08 #6

This discussion thread is closed

Replies have been disabled for this discussion.