Re: selecting div's with dynamic id's

by Michael Geary-3 :: Rate this Message:

For anyone who is wondering, "functino" is Italian for "tiny function."

Here's another way to write the code, using only a single event handler
(event delegation) instead of individual event handlers on every link. This
will be faster if there are a lot of product descriptions. I'd also put an
ID on the parent DIV - <div class="products" id="products"> - to make it
even faster:

$('#products').click( function( event ) {
var $target = $(event.target);
if( $target.is('a.show-description') ) {
$target.parent().next().show();
return false;
}
});

-Mike

> From: Karl Swedberg
>
> Hi Kris,
>
> I'd give the "show description" links a common class -- for
> example, "show-description" That way you can use a basic
> selector to apply to all of those links.
>
> Then, I'd use the "this" keyword to find the appropriate
> description relative to the clicked link.
>
> Adding "return false" will prevent the link's default event
> from being triggered.
>
> So, given your markup, it might look like this:
>
> $('a.show-description').click(functino() {
> $(this).parent().next().show();
> return false;
> });
>
>
> --Karl
> ____________
> Karl Swedberg
> www.englishrules.com
> www.learningjquery.com
>
>
>
>
> On Jul 4, 2008, at 10:36 AM, Kris wrote:
>
> >
> > Whats the best way to provide functionality (eg. toggle an
> 'additional
> > information' div) when dealing with records with unique id's.
> >
> > For example lets say we are dealing with product records
> each one has
> > a unique id which is a number, so the HTML might look something like
> > this:
> >
> > <div class="products">
> > <div class="product" id="product_1">
> > <p>Name: Red Widget</p>
> > <p>Price: 22.00</p>
> > <p><a href="">Show description</a></p>
> > <p id="description_1" style="display:none;">sadasdasdasdasd</p>
> > </div>
> >
> > <div class="product" id="product_2">
> > <p>Name: Blue Widget</p>
> > <p>Price: 24.00</p>
> > <p><a href="">Show description</a></p>
> > <p id="description_2" style="display:none;">sadasdasdasdasd</p>
> > </div>
> >
> > etc. etc.
> > </div>
> >
> > I want to place unobtrusive jquery that will allow the 'show
> > description' link to display the correct description div...
> >
> > Many thanks, K.
> >
> >
>

« Return to Thread: selecting div's with dynamic id's

LightInTheBox - Buy quality products at wholesale price!

jQuery: The Write Less, Do More JavaScript Library

Re: selecting div's with dynamic id's