[jQuery] Re: nextAll Chaining when nextAll is Empty
The 'click' part of your code seems to work fine. I couldn't test the
rest, but prevAll (you've got a typo there) and nextAll + andSelf are
always returning the correct elements. Use Firebug, set console.log( $
(this).preAll('a').andSelf().addClass('star_hover') ) inside the
handler and you'll see that the elements are there. My guess is
something is going wrong when you trigger the mouseout.
- ricardo
On Dec 13, 12:32 am, Reepsy mre...@gmail.com wrote:
Ricardo,
Sorry, but it is a development stage I am not permitted to share. But
the markup is this (basically):
HTML (this was a select menu that gets converted to a hidden field and
5 a tags in an earlier step)
input name=rating id=the-rating value= type=hidden
a href= id=star1 class=star title=1 Star1/a
a href= id=star2 class=star title=2 Stars2/a
a href= id=star3 class=star title=3 Stars3/a
a href= id=star4 class=star title=4 Stars4/a
a href= id=star5 class=star title=5 Stars5/a
JS:
var r = $('#the-rating'); /* THE HIDDEN FIELD STORES RATING */
$('a.star').click(function(){
$(r).val($(this).text()); /* RECORD RATING */
$(this).nextAll('a').andSelf().removeClass
('star_selected').triggerHandler('mouseout');
return false;})
.hover(
function() {
$(this).preAll('a').andSelf().addClass('star_hover')
$(this).nextAll('a').removeClass('star_selected');
},
function() {
$(this).prevAll('a.star').andSelf().removeClass('star_hover');
$('#star' + $(r).val()).prevAll('a.star').andSelf().addClass
('star_selected');
}
);
This worked exactly as expected on stars 2-4. But on #5 the click
failed to add the class and fire the mouseout. I presume it is because
there is no nextAll. Likewise, on star #1 the hover failed remove the
class. Again, I presume because there is no prevAll.
Michael
On Dec 12, 11:50 am, ricardobeat ricardob...@gmail.com wrote:
Do you have a test page we can look at?
nextAllreturns an empty object if there is no 'next', but it doesn't
interrupt thechain, there may be something else going on. I couldn't
reproduce your situation here,nextAll().andSelf() returns me the
original element.
- ricardo
On Dec 12, 10:39 am, Reepsy mre...@gmail.com wrote:
This might sound naive, but I expected this to work:
$(this).nextAll('a').andSelf().removeClass
('star_selected').triggerHandler('mouseout');
It's from a star rating I wrote, where I have 5 a tags in a row. If
you click on one it removes a class from it and all that follow it,
and then fires the mouseout event. This works perfectly for stars 1-4,
but fails on #5, because there is no next. But I did not expect it to
ignore the rest of thechain. Everything after .nextAllis ignored. If
I break this into two lines, it works fine:
$(this).nextAll('a').removeClass('star_selected');
$(this).removeClass('star_selected').triggerHandler('mouseout');
But I am repeating myself with the removeClass. Can anyone see a way
to combine these back into one statement? The mouseout has to go last.
Michael
[jQuery] Re: nextAll Chaining when nextAll is Empty
However, .triggerHandler() is documented to only call the handler for
the first element in the jQuery object. The .andSelf() adds the $
(this) to the end of the object. If you click star 3 and the click
handler is this:
$(this).nextAll('a').andSelf().removeClass
('star_selected').triggerHandler('mouseout');
the elements are in the order 4 5 3 and it calls mouseout on element
4. But if the click handler is this
$(this).nextAll('a').removeClass('star_selected');
$(this).removeClass('star_selected').triggerHandler('mouseout');
it calls mouseout on element 3.
[jQuery] Re: nextAll Chaining when nextAll is Empty
Hi Michael,
Try this. It uses the index of the a within the div and then
removes the class from all a elements equal or greater than it.
The code is a bit cumbersome but I think it works.
div id=links
a href=# class=star_selectedlorem ipsum/a
a href=# class=star_selectedlorem ipsum/a
a href=# class=star_selectedlorem ipsum/a
a href=# class=star_selectedlorem ipsum/a
a href=# class=star_selectedlorem ipsum/a
/div
$('#links a').click(function(){
$('a:gt('+($(#links a').index(this)-1)+')').removeClass
('star_selected');
return false;
});
Paul
On Dec 12, 12:39 pm, Reepsy mre...@gmail.com wrote:
This might sound naive, but I expected this to work:
$(this).nextAll('a').andSelf().removeClass
('star_selected').triggerHandler('mouseout');
It's from a star rating I wrote, where I have 5 a tags in a row. If
you click on one it removes a class from it and all that follow it,
and then fires the mouseout event. This works perfectly for stars 1-4,
but fails on #5, because there is no next. But I did not expect it to
ignore the rest of the chain. Everything after .nextAll is ignored. If
I break this into two lines, it works fine:
$(this).nextAll('a').removeClass('star_selected');
$(this).removeClass('star_selected').triggerHandler('mouseout');
But I am repeating myself with the removeClass. Can anyone see a way
to combine these back into one statement? The mouseout has to go last.
Michael
[jQuery] Re: nextAll Chaining when nextAll is Empty
Paul,
Thanks for the reply. I do not wish to use a container here, if I can
help it, but I do have a unique class name to hook onto, and your
solution works just fine with it. So my code became:
$('a.star:gt(' + ($(a.star).index(this)-1) + ')').removeClass
('star_selected').triggerHandler('mouseout');
I have a similar situation on the hover, but in reverse. The on
hovered and all less than it need to have a class added. So that
becomes:
$('a.star:lt(' + ($(a.star).index(this)+1) + ')').addClass
('star_hover');
Works like a charm. Thanks again.
I still am a bit surprised about how nextAll breaks the chain though.
I realize nothing is returned, but we still know what $(this) is in
this statement:
$(this).nextAll('a').andSelf().removeClass
('star_selected').triggerHandler('mouseout');
So it is still unclear to me why andSelf is not enough to move you on
down the line to removing the class and triggering the mouseout. If
anyone can explain that to me, I'd appreciate it.
Michael
On Dec 12, 10:28 am, Paul Mills paul.f.mi...@gmail.com wrote:
Hi Michael,
Try this. It uses the index of the a within the div and then
removes the class from all a elements equal or greater than it.
The code is a bit cumbersome but I think it works.
div id=links
a href=# class=star_selectedlorem ipsum/a
a href=# class=star_selectedlorem ipsum/a
a href=# class=star_selectedlorem ipsum/a
a href=# class=star_selectedlorem ipsum/a
a href=# class=star_selectedlorem ipsum/a
/div
$('#links a').click(function(){
$('a:gt('+($(#links a').index(this)-1)+')').removeClass
('star_selected');
return false;
});
Paul
On Dec 12, 12:39 pm, Reepsy mre...@gmail.com wrote:
This might sound naive, but I expected this to work:
$(this).nextAll('a').andSelf().removeClass
('star_selected').triggerHandler('mouseout');
It's from a star rating I wrote, where I have 5 a tags in a row. If
you click on one it removes a class from it and all that follow it,
and then fires the mouseout event. This works perfectly for stars 1-4,
but fails on #5, because there is no next. But I did not expect it to
ignore the rest of the chain. Everything after .nextAll is ignored. If
I break this into two lines, it works fine:
$(this).nextAll('a').removeClass('star_selected');
$(this).removeClass('star_selected').triggerHandler('mouseout');
But I am repeating myself with the removeClass. Can anyone see a way
to combine these back into one statement? The mouseout has to go last.
Michael
[jQuery] Re: nextAll Chaining when nextAll is Empty
Do you have a test page we can look at?
nextAll returns an empty object if there is no 'next', but it doesn't
interrupt the chain, there may be something else going on. I couldn't
reproduce your situation here, nextAll().andSelf() returns me the
original element.
- ricardo
On Dec 12, 10:39 am, Reepsy mre...@gmail.com wrote:
This might sound naive, but I expected this to work:
$(this).nextAll('a').andSelf().removeClass
('star_selected').triggerHandler('mouseout');
It's from a star rating I wrote, where I have 5 a tags in a row. If
you click on one it removes a class from it and all that follow it,
and then fires the mouseout event. This works perfectly for stars 1-4,
but fails on #5, because there is no next. But I did not expect it to
ignore the rest of the chain. Everything after .nextAll is ignored. If
I break this into two lines, it works fine:
$(this).nextAll('a').removeClass('star_selected');
$(this).removeClass('star_selected').triggerHandler('mouseout');
But I am repeating myself with the removeClass. Can anyone see a way
to combine these back into one statement? The mouseout has to go last.
Michael
[jQuery] Re: nextAll Chaining when nextAll is Empty
Ricardo,
Sorry, but it is a development stage I am not permitted to share. But
the markup is this (basically):
HTML (this was a select menu that gets converted to a hidden field and
5 a tags in an earlier step)
input name=rating id=the-rating value= type=hidden
a href= id=star1 class=star title=1 Star1/a
a href= id=star2 class=star title=2 Stars2/a
a href= id=star3 class=star title=3 Stars3/a
a href= id=star4 class=star title=4 Stars4/a
a href= id=star5 class=star title=5 Stars5/a
JS:
var r = $('#the-rating'); /* THE HIDDEN FIELD STORES RATING */
$('a.star').click(function(){
$(r).val($(this).text()); /* RECORD RATING */
$(this).nextAll('a').andSelf().removeClass
('star_selected').triggerHandler('mouseout');
return false;
})
.hover(
function() {
$(this).preAll('a').andSelf().addClass('star_hover')
$(this).nextAll('a').removeClass('star_selected');
},
function() {
$(this).prevAll('a.star').andSelf().removeClass('star_hover');
$('#star' + $(r).val()).prevAll('a.star').andSelf().addClass
('star_selected');
}
);
This worked exactly as expected on stars 2-4. But on #5 the click
failed to add the class and fire the mouseout. I presume it is because
there is no nextAll. Likewise, on star #1 the hover failed remove the
class. Again, I presume because there is no prevAll.
Michael
On Dec 12, 11:50 am, ricardobeat ricardob...@gmail.com wrote:
Do you have a test page we can look at?
nextAllreturns an empty object if there is no 'next', but it doesn't
interrupt thechain, there may be something else going on. I couldn't
reproduce your situation here,nextAll().andSelf() returns me the
original element.
- ricardo
On Dec 12, 10:39 am, Reepsy mre...@gmail.com wrote:
This might sound naive, but I expected this to work:
$(this).nextAll('a').andSelf().removeClass
('star_selected').triggerHandler('mouseout');
It's from a star rating I wrote, where I have 5 a tags in a row. If
you click on one it removes a class from it and all that follow it,
and then fires the mouseout event. This works perfectly for stars 1-4,
but fails on #5, because there is no next. But I did not expect it to
ignore the rest of thechain. Everything after .nextAllis ignored. If
I break this into two lines, it works fine:
$(this).nextAll('a').removeClass('star_selected');
$(this).removeClass('star_selected').triggerHandler('mouseout');
But I am repeating myself with the removeClass. Can anyone see a way
to combine these back into one statement? The mouseout has to go last.
Michael
