How can I observe elements with class="test_1", "test_2", "test_3" or "first_test", "second_test", "third_test"?

1 view
Skip to first unread message

kimbaudi

unread,
Dec 31, 2009, 5:05:36 AM12/31/09
to Prototype & script.aculo.us
Hi, I know how to observe elements with class="test". However, I would
like to know how I would be able to observe elements with
class="test_1", class="test_2" and class="test_3" or
class="first_test", class="second_test" and class="third_test". Here
is my pastie url that observes elements with class="test" and alerts
the innerHTML of these elements: http://pastie.org/762352. Can someone
please show me a code that will alert the innerHTML of elements that
have classes "test_1", "test_2", "test_3" and elements that have
classes "first_test", "second_test", "third_test"? I am familiar w/
Javascript to know that this is possible but unfamiliar w/ Javascript
to know how to achieve this.

Frédéric

unread,
Dec 31, 2009, 5:30:05 AM12/31/09
to prototype-s...@googlegroups.com

A simple-but-not-smart way is to parse all dom elements and observe all id
containting 'test'...

--
Frédéric

Alex McAuley

unread,
Dec 31, 2009, 5:37:35 AM12/31/09
to prototype-s...@googlegroups.com
You can comma up your classes in the observer...

$$('.test_1','.test_2','#some_id','.test_3').each(...
});


HTH
Alex Mcauley
http://www.thevacancymarket.com
----- Original Message -----
From: "Fr�d�ric" <f...@gbiloba.org>
To: <prototype-s...@googlegroups.com>
Sent: Thursday, December 31, 2009 10:30 AM
Subject: Re: [Proto-Scripty] How can I observe elements with class="test_1",
"test_2", "test_3" or "first_test", "second_test", "third_test"?

--
Fr�d�ric

--

You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to
prototype-s...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scripta...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.

Paul Kim

unread,
Dec 31, 2009, 6:07:05 AM12/31/09
to prototype-s...@googlegroups.com
Sorry, but I'm afraid your "simple-but-not-smart way" addresses the problem because I am observing elements with class, not id.

Frédéric

unread,
Dec 31, 2009, 6:09:56 AM12/31/09
to prototype-s...@googlegroups.com
On jeudi 31 décembre 2009, Paul Kim wrote:

> Sorry, but I'm afraid your "simple-but-not-smart way" addresses the
> problem because I am observing elements with class, not id.

Oups, sorry. But I guess there is a way to parse all classes defined in
CSS?

--
Frédéric

Paul Kim

unread,
Dec 31, 2009, 6:10:37 AM12/31/09
to prototype-s...@googlegroups.com
That is a great solution if I have a few elements with class that starts with "test_" or ends with "_test". But what if I have 1,000 elements that start with "test_" or ends with "_test"? Do you really want me to do this: $$(.'test_1', 'test_2', ... 'test_1000') or $$('first_test', 'second_test', ... 'onethousand_test')?

On Thu, Dec 31, 2009 at 2:37 AM, Alex McAuley <webm...@thecarmarketplace.com> wrote:
You can comma up your classes in the observer...

$$('.test_1','.test_2','#some_id','.test_3').each(...
});


HTH
Alex Mcauley
http://www.thevacancymarket.com
----- Original Message -----
From: "Frédéric" <f...@gbiloba.org>
To: <prototype-s...@googlegroups.com>
Sent: Thursday, December 31, 2009 10:30 AM
Subject: Re: [Proto-Scripty] How can I observe elements with class="test_1",
"test_2", "test_3" or "first_test", "second_test", "third_test"?


On jeudi 31 décembre 2009, kimbaudi wrote:

> Hi, I know how to observe elements with class="test". However, I would
> like to know how I would be able to observe elements with
> class="test_1", class="test_2" and class="test_3" or
> class="first_test", class="second_test" and class="third_test". Here
> is my pastie url that observes elements with class="test" and alerts
> the innerHTML of these elements: http://pastie.org/762352. Can someone
> please show me a code that will alert the innerHTML of elements that
> have classes "test_1", "test_2", "test_3" and elements that have
> classes "first_test", "second_test", "third_test"? I am familiar w/
> Javascript to know that this is possible but unfamiliar w/ Javascript
> to know how to achieve this.

A simple-but-not-smart way is to parse all dom elements and observe all id
containting 'test'...

--
   Frédéric

Alex McAuley

unread,
Dec 31, 2009, 6:14:21 AM12/31/09
to prototype-s...@googlegroups.com
RE. post 1.
 
There is a pastie to show u how!..
Re post 2.
 
I don't want -you- to do anything. You are the one with the problem and you asked how to get round it - so i showed you. It is up to you how you write your scripts / html in a way that does not require you to have 1000 listeners.
 
For a start having 1000 click listeners on a page will eat memory on the client
 
Secondly. If you have to have 1000 elements on a single page that require observers -I- would go back to thee drawing board and rethink my application.

Paul Kim

unread,
Dec 31, 2009, 6:49:27 AM12/31/09
to prototype-s...@googlegroups.com
Sorry, I was just suggesting a hypothetical. I don't have 1000 listeners and I understand that doing so will eat memory on the client. I was hoping that there was a solution where I can find all the elements that have a class that starts with "test_" and Javascript will be able to add an onclick observer to those elements. This way, I wouldn't have to know the elements that start with "test_" ahead of time.

Paul Kim

unread,
Dec 31, 2009, 7:41:09 AM12/31/09
to prototype-s...@googlegroups.com
Okay, I found the solution to adding onclick observer to elements with a class that either has a prefix of "test_" or a suffix of "_test".  In case anyone is interested, here is a pastie to add onclick observers to elements with a class that has a prefix of "test_": http://pastie.org/762432. And here is a pastie to add onclick observers to elements with a class that has a suffix of "_test": http://pastie.org/762433. Glad to know that Prototype supports CSS3 selectors for the $$ function. Cheers.

Alex McAuley

unread,
Dec 31, 2009, 8:24:31 AM12/31/09
to prototype-s...@googlegroups.com
you can regex in your class with []
 
There is documentation on how to do so on the prototype api website
Reply all
Reply to author
Forward
0 new messages