javascript - 怎样用jQuery写这段代码

Question

window.onload=function(){
            var oUl=document.getElementById('oUl');
            var aLi=oUl.children;

            for(var i=0;i<aLi.length;i++){
                aLi[i].index=i;
                aLi[i].onmouseover=function(){
                    for(var i=0;i<aLi.length;i++){
                        if(this.index>=i){
                            aLi[i].className='ac';
                        }else{
                            aLi[i].className='';
                        }
                    }
                };
            }

        } 

Answer 1

$("#oUL li").click(function(){
    $(this).attr("class", "ac")
        .siblings()
        .attr("class", "")
})

Answer 2

var aLi = $('#oUl li')
aLi.on('mouseover', function(){
    aLi.each(function(index, value){
        $(this).index >= index? $(this).attr('class', 'ac'): $(this).attr('class', '');
    }) 
})

Answer 3

$(function() {
    $('#oUl').on('mouseover', 'li', function(e) {
        var $t = $(this);
        
        $t.siblings().removeClass('ac');
        $t.addClass('ac').nextAll().addClass('ac');
    });
})

Answer 4

不知道你的需求，只是把你的代码翻译了一边，代码量貌似变多了，真是糟糕...

$(document).ready(function () {
  var oLi = $('#oUl li')
  oLi.each(function (index, item) {
    item.index = index
    item.onmouseover = function () {
      $(item).each(function (index1, item1) {
        if($(item).index >= index1){
          $(item1).addClass('ac')
        }else{
          $(item1).removeClass('ac')
        }
      })
    }
  })
})

Answer 5

$(function(){
    var oULchild=$("#oUL *");
    
    oULchild
        .each(function(index){
            $(this)[0].index=index;
        })
        .on("mouseover",function(){
            oULchild.each(function(index){
                $(this)[0].index>=index?$(this).addClass('ac'): $(this).removeClass('ac');
            });
        })
    
})

不知道你要做什么，如果是给鼠标所在的子对象添加class，移除其他子对象的class那就是第一个答案那样：

$(function(){
    $("#oUL *").on("mouseover",function(){
        $(this).addClass("ac")
               .siblings()
               .removeClass("ac")
    })
})

Answer 6

$('#oUl > li').on('mouseover',function(){
    $('#oUl > li:lt(' + ($(this).index() + 1) + ')').attr('class','ac');
    $(this).nextAll().attr('class','');
})

Answer 7

一行解决：

$('#oUl > *').on('mouseover', function() {
    $(this).prevAll().attr('class', '').end().nextAll().addBack().attr('class', 'ac');
});

Answer 8

不是最简洁的，但是能表达出你的意思

    $(function(){
        var aLi = $("#oUl li");
        aLi.each(function() {
            $(this).mouseover(function() {
                $(this).addClass('ac').prevAll().addClass('ac').end().nextAll().removeClass('ac');
            });
        });
    })

Answer 9

$('#oUl > li').on('mouseover',function(){
   $(this).prevAll().attr('class', '').end().nextAll().attr('class', 'ac');
})