Search code examples
javascriptjqueryprototypejs

convert jQuery to Prototype


I have this jQuery script I'm trying to implement om Magento and I've tried usin noConflict but it still doesn't work. Magento runs prototype...I don't know any prototype so how would I go about converting this script from jQuery to Prototype?!

        var active = 0; // starts at zero
        var list = $('ul');

        list.children('li').eq('0').siblings().hide(); // Hide all except first list element

        $('.next').bind('click', function() {
            active = active == list.children('li').length-1 ? 0 : active + 1;
        });

        $('.prev').bind('click', function() {
            active = active == 0 ? list.children('li').length-1 : active - 1;
        });

        var getActive = function() {
            return list.children('li').eq(active);
        };

        $('.prev,.next').bind('click', function() {
            getActive().fadeIn().siblings().hide();
        });

Solution

    1. Look at a line, for example var list = $('ul');
    2. Determine what it does? A: It uses the 'ul' selector to grab some elements.
    3. Determine how to do that thing in Prototype. You can use Google or Prototype's documentation. Here we find Prototype.Selector.select(expression[, root = document]) → [Element…]
    4. Repeat for remaining lines

    Optional step 5: If at any point along the way you have a more specific problem, come back and ask about it.