javascript - Converting MooTools to a jQuery script

Question

I was wondering how I can convert this script right below:

> window.addEvent('domready', function(){
  var dropdowns = $$('#menu-tree > li');
  dropdowns.each(function(li){
    var a = li.getElement('a');
    var ul = li.getElement('ul');

    li.addClass('primary-li');
    a.addClass('primary-a');
    li.getElements('.expanded ul').destroy();

    if(ul){
      var dropdown = new Element('div', {
        'class': 'drop-down',
        'html': '<div class="drop-down-head"></div><div class="drop-down-body"><ul class="drop-down-content">' + ul.innerHTML + '</ul></div><div class="drop-down-foot"></div>'
      }).inject(li, 'bottom');
      ul.destroy();

      li.getElement('li').addClass('first');

      li.addEvents({
        'mouseenter': function(){
          this.addClass('hovered');
        },
        'mouseleave': function(){
          this.removeClass('hovered')
        }
      });
    }


  });
  $('primaryLinks').addClass('ready');

  if(document.id('primaryLinks').getElement('a')){
    w = 0; total = 0;w_arr = [];
    $$('#menu-tree .primary-a').each(function(a){w = a.getSize().x; w_arr.push(w); total += w;});
    pad = (primaryMenuSize - total - 2) / primaryMenuLinks;
    $$('#menu-tree .primary-li').each(function(li) {li.setStyle('width', ((w_arr.shift() + pad) / primaryMenuSize) * 100 + '%')});
    document.id('menu-tree').setStyle('visibility', 'visible');
  }

  if($$('.keyboard-layout a')){
    $$('.keyboard-layout a').each(function(key){
      key.title = key.getAttribute('title');
      key.button = key.className;
      key.description = key.getAttribute('rel');

      key.tip = '<div class="format"><dl class="keyboard"><dt>' + key.title + '</dt><dd class="description">' + key.description + '</dd></dl></div>';
      key.setAttribute('rel', key.tip);
      key.setAttribute('title', '');
    });

    var tips = ($$('.keyboard-layout a'), {
      className: 'hover-tip key-tip'
    });
  }
});


window.addEvent('load', function(){
  $$('.slide-window').each(function(win){
    win.container = win.getElement('.slide-panels-container');

  });


  $$('.slide-panels').each(function(sli){
    var current = 0;

    sli.win = sli.getElement('.slide-window');
    sli.pager = sli.getElement('.slide-pager');
    sli.container = sli.getElement('.slide-panels-container');
    sli.pages = sli.getElements('.slide-panel');
    sli.current = current;

    sli.fx = new Fx.Tween(sli.container, {
      'duration': 500,
      'property': 'margin-left',
      'link': 'cancel',
      'unit': '%',
      'transition': 'quad:out'
    });

    if(sli.pager){
      sli.setStyle('height', sli.container.getSize().y + sli.pager.getSize().y);

      sli.next = sli.getElement('.slide-arrow-next');
      sli.prev = sli.getElement('.slide-arrow-prev');


      sli.pager.setStyles({
        'display':      'block',
        'float':        'none',
        'margin':       '0 0 0 -64px',
        'visibility':   'visible',
        'width':        sli.pager.getSize().x
      });


      var pageNum = 0;
      var maxHeight = 0;

      sli.pager.getElements('.slide-page').each(function(page){
        var targetPage = pageNum;

        page.addEvent('click', function(e){
          sli.fireEvent('goto', targetPage);
        });

        pageNum++;
      });

      sli.next.addEvent('click', function(){
        var target = sli.current + 1;
        sli.fireEvent('goto', target);
      });

      sli.prev.addEvent('click', function(){
        var target = sli.current - 1;
        sli.fireEvent('goto', target);
      });

      sli.addEvents({
        'goto': function(target){
          if(target === -1){
            var last = sli.pages.length - 1;
            sli.fx.start(last * -100);
            sli.fireEvent('setPager', last);
          } else if(sli.getElement('.slide-panel-' + target)){
            sli.fx.start(target * -100);
            sli.fireEvent('setPager', target);
          } else {
            sli.fx.start(0);
            sli.fireEvent('setPager', 0);
          }
        },
        'setPager': function(target){
          sli.pager.getElement('.current').removeClass('current');
          sli.pager.getElement('.slide-page-' + target).addClass('current');
          sli.current = target;
        }
      });
    }
  });
});

I have tried to change multiple times a bunch of "lines" with the jQuery usage ones, and it didn't work. So I'm sending the entire MooTools script, rather than what I've tried. The li parts are the ones where I struggle the most. They don't seem to work when I convert it while removing MooTools at the same time.

Any help would be appreciated!

Answer 1

等待大神解答