Last child selector seems to have stopped working

[wid]

Here is my problem, I was using Prototype 1.6.0 and Scriptaculous
1.8.1 and decided it was time to upgrade to Prototype 1.6.1 and
Scriptaculous 1.8.2. I have a snipet of code that used to work before
upgrading I couldn't figure out why. Below is a my code, the first
child function works but the last child seems to not work at all. I
didn't see any changes in the API for different ways of doing Each
Loops or CSS Selectors. Anyone got an idea?

var firstMenuItem = $$('#preview-accordion-menu.accordion
div.accordion-toggle:first-child');
var lastMenuItem = $$('#preview-accordion-menu.accordion
div.accordion-toggle:nth-last-of-type(1)');
firstMenuItem.each(function (element, index) {
Event.observe(element, 'mouseover', function () {
$('pg-nav-hover').removeClassName('panel-accordion');
$('pg-nav-hover').addClassName('accordion-top-hover');
});
Event.observe(element, 'mouseout', function () {
$('pg-nav-hover').removeClassName('accordion-top-hover');
$('pg-nav-hover').addClassName('panel-accordion');
});
});
lastMenuItem.each(function (element, index) {
element.addClassName('last');
Event.observe(element, 'mouseover', function () {
$('pg-nav-hover').removeClassName('panel-accordion');
$('pg-nav-hover').addClassName('accordion-bottom-hover');
});
Event.observe(element, 'mouseout', function () {
$('pg-nav-hover').removeClassName('accordion-bottom-hover');
$('pg-nav-hover').addClassName('panel-accordion');
});
});

[T.J. Crowder]

Hi,

Thanks for writing in. Can you create a minimal, self-contained test
case[1] that works with 1.6.0 but doesn't work with 1.6.1? (I was
just going to do it, but I frankly don't know the nth-last-of-type
selector well enough.) If you can replicate it with a simple self-
contained test case that does work with 1.6.0 but not 1.6.1, would you
open a ticket for this on Lighthouse[2]?

[1] http://proto-scripty.wikidot.com/self-contained-test-page
[2] https://prototype.lighthouseapp.com/projects/8886-prototype/overview

Thanks,
--
T.J. Crowder
tj / crowder software / com
www.crowdersoftware.com

[wid]

I have not made a test yet but I will soon. I did how ever report this
to lighthouse and they told me this wasn't a bug? That makes no sense
to me but here is some updated information about the issue.

CSS selectors for FireFox 3.5, Safari 4, and Chrome 3 seem to not work
correctly.

I created a function so I could create listeners for the first and
last child of my menu. I was using Prototype 1.6.0, but I had other
issues with new browsers and upgraded to 1.6.1 which fixed most of my
issues but now this upgrade has broke my current code for FireFox 3.5,
Safari 4, and Chrome 3. The CSS selector nth-last-of-type(1) is
supposed to grab the last child in my menu, this works in IE7 and IE8
but this has stop working for FireFox 3.5, Safari 4, and Chrome 3
since I upgraded. I down graded just to see if my suspicions were
correct and they were. Now if I change the value of my CSS Selector to
nth-last-of-type(2), my code works again but only in FireFox 3.5,
Safari 4, and Chrome 3 which then breaks the code for IE7 and IE8.
This doesn't make sense because I have not changed any of the DOM
structure.

Below is my JS.


function myFunction() {

> >childfunction works but thelastchildseems to not work at all.  I

[T.J. Crowder]

Hi,

> I have not made a test yet but I will soon. I did how ever report this
> to lighthouse and they told me this wasn't a bug?

Well, without a simple failing test case, it's hard to say it's a bug
in Prototype as opposed to something else. It's not that hard to
create one, is it? If you understand nth-last-of-type and know what
you're expecting to see that's changed between the two versions?

-- T.J.