Getting next element with exact class

[me-and-jQuery]

I am posting my first thread here so I would like to say Hello first.
Now, here is the problem.

I have a table. Lets see the example.

<table>
<tr><td>1</td><td class="niceclass">1</td><td>1</td><td
class="niceclass">1</td></tr>
<tr><td>2</td><td class="niceclass">2</td><td>2</td><td
class="niceclass">2</td></tr>
<tr><td>3</td><td class="niceclass">3</td><td>3</td><td
class="niceclass">3</td></tr>
</table>

Some cells have also a class "niceclass" and I want that if I click on
any of these cells with this class to get the next cell with the same
class.

I tried something like this and many other ways, but no luck.

$(".niceclass").click(function() {
                $(".niceclass",this).next(".niceclass").css({"background":"red"});
})

Thanks for any hints.

[Karl Swedberg-2]

this is a pretty tricky one, because you have more than one niceclass in each row. If I'm understanding you correctly, clicking the second niceclass cell in the first row will change the background color of the first niceclass cell in the second row. 

Probably the easiest way to do this is to find the index of the clicked cell among all niceclass cells. Then highlight the cell with index+1. This should do it:

$('td.niceclass').click(function() {

  var $niceClass = $(this).parents('table:first').find('td.niceclass');

  var thisIndex = $niceClass.index(this);

  $niceClass.slice(thisIndex+1, thisIndex+2).css({backgroundColor: 'red'});

});

--Karl
____________

Karl Swedberg

www.englishrules.com

www.learningjquery.com

On Jul 23, 2008, at 11:37 AM, me-and-jQuery wrote:

I am posting my first thread here so I would like to say Hello first.
Now, here is the problem.

I have a table. Lets see the example.

<table>
<tr><td>1</td><td class="niceclass">1</td><td>1</td><td
class="niceclass">1</td></tr>
<tr><td>2</td><td class="niceclass">2</td><td>2</td><td
class="niceclass">2</td></tr>
<tr><td>3</td><td class="niceclass">3</td><td>3</td><td
class="niceclass">3</td></tr>
</table>

Some cells have also a class "niceclass" and I want that if I click on
any of these cells with this class to get the next cell with the same
class.

I tried something like this and many other ways, but no luck.

$(".niceclass").click(function() {
$(".niceclass",this).next(".niceclass").css({"background":"red"});
})

Thanks for any hints.

[me-and-jQuery]

Karl, this is excatly what I am looking for. Thanks.

If someone need to highlight the first cell when clicking the last,
just compare clicked index with $niceClass.size().

On Jul 23, 6:47 pm, Karl Swedberg <k...@...> wrote:

> this is a pretty tricky one, because you have more than one niceclass
> in each row. If I'm understanding you correctly, clicking the second
> niceclass cell in the first row will change the background color of
> the first niceclass cell in the second row.
>
> Probably the easiest way to do this is to find the index of the
> clicked cell among all niceclass cells. Then highlight the cell with
> index+1. This should do it:
>
> $('td.niceclass').click(function() {
>    var $niceClass = $(this).parents('table:first').find('td.niceclass');
>    var thisIndex = $niceClass.index(this);
>    $niceClass.slice(thisIndex+1, thisIndex+2).css({backgroundColor:
> 'red'});
>
> });
>
> --Karl
> ____________
> Karl Swedbergwww.englishrules.comwww.learningjquery.com
>
> On Jul 23, 2008, at 11:37 AM, me-and-jQuery wrote:
>
>
>
> > I am posting my first thread here so I would like to say Hello first.
> > Now, here is the problem.
>
> > I have a table. Lets see the example.
>
> > <table>
> > <tr><td>1</td><td class="niceclass">1</td><td>1</td><td
> > class="niceclass">1</td></tr>
> > <tr><td>2</td><td class="niceclass">2</td><td>2</td><td
> > class="niceclass">2</td></tr>
> > <tr><td>3</td><td class="niceclass">3</td><td>3</td><td
> > class="niceclass">3</td></tr>
> > </table>
>
> > Some cells have also a class "niceclass" and I want that if I click on
> > any of these cells with this class to get the next cell with the same
> > class.
>
> > I tried something like this and many other ways, but no luck.
>
> > $(".niceclass").click(function() {
> >            $(".niceclass",this).next(".niceclass").css({"background":"red"});
> > })
>
> > Thanks for any hints.

[Ariel Flesler]

Why $niceClass.slice(thisIndex+1, thisIndex+2)
And not just $niceClass.eq(thisIndex+1)

Just as an option, here's my version

var $tds = $('td.niceclass').click(function() {
   var i = $tds.index(this);
   $tds.eq(i+1).css({backgroundColor:'red'});
});

Cheers

--
Ariel Flesler
http://flesler.blogspot.com/

On 23 jul, 13:47, Karl Swedberg <k...@...> wrote:

> this is a pretty tricky one, because you have more than one niceclass  
> in each row. If I'm understanding you correctly, clicking the second  
> niceclass cell in the first row will change the background color of  
> the first niceclass cell in the second row.
>
> Probably the easiest way to do this is to find the index of the  
> clicked cell among all niceclass cells. Then highlight the cell with  
> index+1. This should do it:
>
> $('td.niceclass').click(function() {
>    var $niceClass = $(this).parents('table:first').find('td.niceclass');
>    var thisIndex = $niceClass.index(this);
>    $niceClass.slice(thisIndex+1, thisIndex+2).css({backgroundColor:  
> 'red'});
>
> });
>
> --Karl
> ____________
> Karl Swedbergwww.englishrules.comwww.learningjquery.com
>
> On Jul 23, 2008, at 11:37 AM, me-and-jQuery wrote:
>
>
>
>
>
> > I am posting my first thread here so I would like to say Hello first.
> > Now, here is the problem.
>
> > I have a table. Lets see the example.
>
> > <table>
> > <tr><td>1</td><td class="niceclass">1</td><td>1</td><td
> > class="niceclass">1</td></tr>
> > <tr><td>2</td><td class="niceclass">2</td><td>2</td><td
> > class="niceclass">2</td></tr>
> > <tr><td>3</td><td class="niceclass">3</td><td>3</td><td
> > class="niceclass">3</td></tr>
> > </table>
>
> > Some cells have also a class "niceclass" and I want that if I click on
> > any of these cells with this class to get the next cell with the same
> > class.
>
> > I tried something like this and many other ways, but no luck.
>
> > $(".niceclass").click(function() {
> >            $(".niceclass",this).next(".niceclass").css({"background":"red"});
> > })
>
> > Thanks for any hints.- Ocultar texto de la cita -
>
> - Mostrar texto de la cita -

[Karl Swedberg-2]

oh yeah! Momentary lapse of memory. The .eq() method was removed along with .gt() and .lt() back at jQuery version 1.2, but then it was re-introduced in 1.2.1. 

I like your version. :-)

--Karl
____________

Karl Swedberg

www.englishrules.com

www.learningjquery.com

On Jul 23, 2008, at 9:46 PM, Ariel Flesler wrote:

Why $niceClass.slice(thisIndex+1, thisIndex+2)
And not just $niceClass.eq(thisIndex+1)

Just as an option, here's my version

var $tds = $('td.niceclass').click(function() {
  var i = $tds.index(this);
  $tds.eq(i+1).css({backgroundColor:'red'});
});

Cheers

--
Ariel Flesler
http://flesler.blogspot.com/

On 23 jul, 13:47, Karl Swedberg <k...@...> wrote:

this is a pretty tricky one, because you have more than one niceclass  

in each row. If I'm understanding you correctly, clicking the second  

niceclass cell in the first row will change the background color of  

the first niceclass cell in the second row.

Probably the easiest way to do this is to find the index of the  

clicked cell among all niceclass cells. Then highlight the cell with  

index+1. This should do it:

$('td.niceclass').click(function() {

   var $niceClass = $(this).parents('table:first').find('td.niceclass');

   var thisIndex = $niceClass.index(this);

   $niceClass.slice(thisIndex+1, thisIndex+2).css({backgroundColor:  

'red'});

});

--Karl

____________

Karl Swedbergwww.englishrules.comwww.learningjquery.com

On Jul 23, 2008, at 11:37 AM, me-and-jQuery wrote:

I am posting my first thread here so I would like to say Hello first.

Now, here is the problem.

I have a table. Lets see the example.

<table>

<tr><td>1</td><td class="niceclass">1</td><td>1</td><td

class="niceclass">1</td></tr>

<tr><td>2</td><td class="niceclass">2</td><td>2</td><td

class="niceclass">2</td></tr>

<tr><td>3</td><td class="niceclass">3</td><td>3</td><td

class="niceclass">3</td></tr>

</table>

Some cells have also a class "niceclass" and I want that if I click on

any of these cells with this class to get the next cell with the same

class.

I tried something like this and many other ways, but no luck.

$(".niceclass").click(function() {

           $(".niceclass",this).next(".niceclass").css({"background":"red"});

})

Thanks for any hints.- Ocultar texto de la cita -

- Mostrar texto de la cita -

[me-and-jQuery]

Arial, thanks you too.

Your solution is cool and maybe few % faster. But the real time-waster
in my case is finding current one with class active (not with "this"
of click event) and then finding the nextone is pretty fast.


On Jul 24, 3:46 am, Ariel Flesler <afles...@...> wrote:

> Why $niceClass.slice(thisIndex+1, thisIndex+2)
> And not just $niceClass.eq(thisIndex+1)
>
> Just as an option, here's my version
>
> var $tds = $('td.niceclass').click(function() {
>    var i = $tds.index(this);
>    $tds.eq(i+1).css({backgroundColor:'red'});
>
> });
>
> Cheers
>
> --
> Ariel Fleslerhttp://flesler.blogspot.com/
>
> On 23 jul, 13:47, Karl Swedberg <k...@...> wrote:
>
> > this is a pretty tricky one, because you have more than oneniceclass
> > in each row. If I'm understanding you correctly, clicking the second
> >niceclasscell in the first row will change the background color of
> > the firstniceclasscell in the second row.
>
> > Probably the easiest way to do this is to find the index of the
> > clicked cell among allniceclasscells. Then highlight the cell with
> > index+1. This should do it:
>
> > $('td.niceclass').click(function() {
> >    var $niceClass= $(this).parents('table:first').find('td.niceclass');
> >    var thisIndex = $niceClass.index(this);
> >    $niceClass.slice(thisIndex+1, thisIndex+2).css({backgroundColor:
> > 'red'});
>
> > });
>
> > --Karl
> > ____________
> > Karl Swedbergwww.englishrules.comwww.learningjquery.com
>
> > On Jul 23, 2008, at 11:37 AM, me-and-jQuery wrote:
>
> > > I am posting my first thread here so I would like to say Hello first.
> > > Now, here is the problem.
>
> > > I have a table. Lets see the example.
>
> > > <table>
> > > <tr><td>1</td><td class="niceclass">1</td><td>1</td><td
> > > class="niceclass">1</td></tr>
> > > <tr><td>2</td><td class="niceclass">2</td><td>2</td><td
> > > class="niceclass">2</td></tr>
> > > <tr><td>3</td><td class="niceclass">3</td><td>3</td><td
> > > class="niceclass">3</td></tr>
> > > </table>
>
> > > Some cells have also a class "niceclass" and I want that if I click on
> > > any of these cells with this class to get the next cell with the same
> > > class.
>
> > > I tried something like this and many other ways, but no luck.
>
> > > $(".niceclass").click(function() {
> > >            $(".niceclass",this).next(".niceclass").css({"background":"red"});
> > > })
>
> > > Thanks for any hints.- Ocultar texto de la cita -
>
> > - Mostrar texto de la cita -