[jQuery] Re: How to make this work for multiple elements with same class

[Josh Nathanson]

A sneaky way to do it would be to remove the href attribute altogether, and
create a css class that makes the link appear to be hyperlinked:

a.fake-link {
text-decoration: underline;
cursor: pointer;
color: [your link color here]
}

Then add that class to your "non-href" links as desired.

-- Josh



-----Original Message-----
From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On
Behalf Of Rick Faircloth
Sent: Tuesday, January 13, 2009 1:07 PM
To: jquery-en@googlegroups.com
Subject: [jQuery] Re: How to make this work for multiple elements with same
class


Thanks, Josh...

You were almost perfect.  I just needed to add one more .next to the second
line:

$(this).parent().next().next().fadeIn(500);

then it worked.

Another question however, is how to keep the page from going back to the top
every time the Update link is clicked.  I've got two ## as the href because
of
ColdFusion need to have two.  Is that the problem, or is there another
solution?

<a class="update-link" href='##'>Update</a>

That's the current code.  Suggestions?

Thanks,

Rick


> -----Original Message-----
> From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On
Behalf Of Josh Nathanson
> Sent: Tuesday, January 13, 2009 3:36 PM
> To: jquery-en@googlegroups.com
> Subject: [jQuery] Re: How to make this work for multiple elements with
same class
> 
> 
> Rick - I think you want $(this).parent().hide() rather than prev, and
> $(this).parent().next() rather than next().  Prev and next look at the
> sibling level.
> 
> -- Josh
> 
> 
> -----Original Message-----
> From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On
> Behalf Of Rick Faircloth
> Sent: Tuesday, January 13, 2009 12:17 PM
> To: jquery-en@googlegroups.com
> Subject: [jQuery] Re: How to make this work for multiple elements with
same
> class
> 
> 
> Ok...made that change, but no difference in the execution.
> 
> Here's the relevant js and html/cf:
> 
> $(document).ready(function() {
> 
>      $('.update-link').click(function() {
> 
>           $(this).prev('.options').hide();
>           $(this).next('.update-div').fadeIn(500);
> 
>      });
> });
> 
> 
> <div class="options">
>      [ <a href="#tour_url#" target="_blank">Preview</a> ] &nbsp;
>      [ <a class="update-link" href='##'>Update</a> ] &nbsp;
>      [ <a href= "##">Delete</a> ]
> </div>
> 
> 
> <div class="update-div">
> 
> 
>      <div>Edit Link:</div>
>      <div><input class="textinput01 update-input" size="80"
> value="#tour_url#"></div>
>      <div><input class="update-button" type="button" value="Update"></div>
> 
> 
> <div>
> 
> 
> 
> 
> 
> > -----Original Message-----
> > From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On
> Behalf Of MorningZ
> > Sent: Tuesday, January 13, 2009 3:05 PM
> > To: jQuery (English)
> > Subject: [jQuery] Re: How to make this work for multiple elements with
> same class
> >
> >
> > to start: you have
> >
> > $('this')
> >
> > it should be without the ticks
> >
> > $(this)
> >
> > On Jan 13, 2:50 pm, "Rick Faircloth" <r...@whitestonemedia.com> wrote:
> > > Here's the code that I'm trying to make function
> > > for multiple links on a page with the class of "update-link"
> > >
> > > How would I change this to make it work for the specific
> > > .update-link element that I click?
> > >
> > >                 $(document).ready(function() {
> > >
> > >                         $('.update-link').click(function() {
> > >
> > >                                 $('this').prev('.options').hide();
> > >
> $('this').next('.update-div').fadeIn(500);
> > >
> > >                         });
> > >                 });
> > >
> > > Thanks,
> > >
> > > Rick