jQuery seçici

Question

Merhaba nasıl ben seçip prev ve sonraki bir etikete bir sınıf ekleyebilir.

<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> 

örnek: şimdi göre elemanları fare elemanının <li><a href="#">g</a></li> fazla olduğu tahmin 2 CSS sınıfları (.prev & .next) ekleyin istiyoruz, bu yüzden <li><a href="#">f</a></li> 2 sınıfları eklemek istediğiniz ve <li><a href="#">h</a></li>

kesik: önceden

$(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'}); 
      }); 
     }  
    ); 
}); 

sayesinde

Answer 1

Bu işe yaramalı. bu liste çok uzun alabilirsiniz eğer verimli olmayabilir, bu yüzden olsa tüm .sub div döngüsü.

$(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

bu deneyin: 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: Bir küçük düzeltme. İlk öğenin üzerine süpürdü Daha önce, .prev sınıf listesinde son öğeye eklenebilir. Bu düzeltildi.

---

DÜZENLEME

: İşte işleyicisi atamak için .each() kullanan bir versiyonu. her mouseenter için $a.index(this); aramak ihtiyacını ortadan kaldırır, çünkü bu şekilde yapmak biraz daha verimlidir.

Deneyin: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'); 
    }); 
});​ 

---

DÜZENLEME: Eğer sürekli kaldırılıyor uygun sınıfıyla herhangi bir sorun yaşıyorsanız, bu kod satırının kurtulmak:

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

ve başlangıcında

$a.removeClass('prev next'); 

ya: işleyicisi, ile değiştirin Buna

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

gibi olay dinleyicileri ekleme önlemek için çaba sarf etmeliyiz

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

Answer 3

Öyle yeterli (ve daha verimli) Bunun gibi bir dinleyici eklemek:

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

Ayrıca jQuery 1.3 tanıtır .live() (http://api.jquery.com/live/ bakınız)

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

.live() çağrıldığında o var olup olmadığını, seçici ile eşleşir ya da geç oluşturulan bir eleman tarafından atılan herhangi bir olay, belirtilen fonksiyona geçirilir.