Bộ chọn jQuery

Question

Làm cách nào tôi có thể chọn và thêm lớp vào thẻ trước và tiếp theo.

<div class="sub"> 
<ul> 
    <li><a href="#">a</a> 
    <ul> 
    <li><a href="#">b</a> 
     <ul> 
    <li><a href="#">c</a></li> 
    <li><a href="#">d</a></li> 
    <li><a href="#">e</a></li> 
    </ul> 
    </li> 
    <li><a href="#">f</a></li> 
    <li><a href="#">g</a></li> 
    </ul> 
    </li> 
    <li><a href="#">h</a></li> 
    <li><a href="#">i</a></li> 
    <li><a href="#">j</a></li> 
    </ul> 
</div> 

dụ: bây giờ tôi muốn thêm 2 lớp css (.prev & .next) đến các yếu tố theo đoán rằng chuột là trên các yếu tố <li><a href="#">g</a></li>, vì vậy tôi muốn thêm 2 lớp học để <li><a href="#">f</a></li> và <li><a href="#">h</a></li>

snip:

$(document).ready(function() { 
    $('li').css({'border-top': '1px solid green','border-bottom': '1px solid green'}); 

    $('li a').each(
     function(intIndex){  
      $(this).mouseover(function(){ 
       $(this).css({'border-top': '1px solid red','border-bottom': '1px solid red'}); 
        $(this).prev().find('li').css({'border-bottom': 'none'}); 
        $(this).next().find('li').css({'border-top': 'none'}); 
       }).mouseout(function(){ 
        $(this).css({'border-top': '1px solid green','border-bottom': '1px solid green'}); 
      }); 
     }  
    ); 
}); 

cảm ơn trước

Answer 1

Điều này sẽ hoạt động. Mặc dù vậy, nó lặp đi lặp lại qua toàn bộ .sub div, vì vậy nó có thể không hiệu quả nếu danh sách đó có thể thực sự dài.

$(function() { 
    $('.sub li>a').hover(
    function() { 
     var curr = this; 
     var last = ''; 
     var found = false; 
     $('.sub li>a').each(function() { 
     if(found) 
     { 
      $(this).addClass('next'); 
      return false; 
     } 
     if(this == curr) 
     { 
      found = true; 
      $(last).addClass('prev'); 
      $(this).addClass('curr'); //you may want to do this too? 
     } 
     else 
     { 
      last = this; 
     } 
     }); 
    }, 
    function() { 
     $('.sub li>a.next').removeClass('next'); 
     $('.sub li>a.prev').removeClass('prev'); 
    } 
); 
}); 

Answer 2

Hãy thử điều này: http://jsfiddle.net/rsEaF/1/

var $a = $('.sub li > a'); 

$a.mouseenter(function() { 
    var index = $a.index(this); 
    var prev = (index - 1 >= 0) ? $a.eq(index - 1).addClass('prev') : $(); 
    var next = $a.eq(index + 1).addClass('next'); 
    $a.not(prev).not(next).removeClass('prev next'); 
});​ 

EDIT: Một sự điều chỉnh nhỏ. Trước đây, nếu bạn di chuột qua mục đầu tiên, lớp .prev sẽ được thêm vào mục cuối cùng trong danh sách. Điều này đã được sửa chữa.

---

EDIT: Dưới đây là một phiên bản sử dụng .each() để gán bộ xử lý. Làm theo cách này hiệu quả hơn một chút vì nó loại bỏ nhu cầu gọi $a.index(this); cho mỗi mouseenter.

Hãy thử nó ra:http://jsfiddle.net/rsEaF/3/

var $a = $('.sub li > a'); 

$a.each(function(index) { 
    $(this).mouseenter(function() { 
     var prev = (index - 1 >= 0) ? $a.eq(index - 1).addClass('prev') : $(); 
     var next = $a.eq(index + 1).addClass('next'); 
     $a.not(prev).not(next).removeClass('prev next'); 
    }); 
});​ 

---

EDIT: Nếu bạn gặp bất kỳ vấn đề với các lớp thích hợp đang được gỡ bỏ một cách nhất quán, thoát khỏi dòng mã này:

$a.not(prev).not(next).removeClass('prev next'); 

và tại số bắt đầu trong tổng số xử lý, thay thế nó bằng:

$a.removeClass('prev next'); 

hay:

$a.filter('.prev,.next').removeClass('prev next'); 

Answer 3

Bạn nên thực hiện một nỗ lực để tránh gắn nghe sự kiện như thế này

$('li a').each(function (el) { 
    $(el).mouseover(function (e) { 
     /* event handler code */ 
    }); 
}); 

Nó là đủ (và hiệu quả hơn) để đính kèm một người nghe như vậy:

$('li a').mouseover(function (e) { 
    /* event handler code */ 
}); 

Cũng jQuery 1.3 giới thiệu .live() (xem http://api.jquery.com/live/)

$('li a').live('mouseover', function (e) { 
    /* event handler code */ 
}); 

Bất kỳ sự kiện ném bởi một yếu tố phù hợp với bộ chọn, cho dù nó tồn tại khi .live() được gọi là hay được tạo ra sau, sẽ được truyền cho hàm cụ thể.