jQuery चयनकर्ता

Question

हाय मैं पिछले और अगले टैग में एक वर्ग कैसे चुन सकता हूं और जोड़ सकता हूं।

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

उदाहरण: अब मैं अनुसार तत्वों लगता है कि माउस तत्व <li><a href="#">g</a></li> खत्म हो गया है करने के लिए 2 सीएसएस वर्गों (.prev & .next) जोड़ना चाहते हैं, तो मैं <li><a href="#">f</a></li> करने के लिए 2 वर्गों जोड़ना चाहते हैं और <li><a href="#">h</a></li>

स्निप:

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

अग्रिम धन्यवाद

Answer 1

यह काम करना चाहिए। यह पूरे .sub div के माध्यम से loops हालांकि, तो यह कुशल नहीं हो सकता है अगर वह सूची वास्तव में लंबी हो सकती है।

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

इस प्रयास करें: 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'); 
});​ 

संपादित करें: एक नाबालिग सुधार। पहले, यदि आप पहले आइटम पर आच्छादित हैं, तो .prev कक्षा सूची में अंतिम आइटम में जोड़ा जाएगा। यह सही किया गया है।

---

संपादित करें: यहाँ एक संस्करण .each() का उपयोग करता है हैंडलर आवंटित करने के लिए है। इसे इस तरह से करना थोड़ा अधिक कुशल है क्योंकि यह प्रत्येक mouseenter के लिए $a.index(this); पर कॉल करने की आवश्यकता को हटा देता है।

इसे आजमाएं: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'); 
    }); 
});​ 

---

संपादित करें: आप उचित वर्ग से संबंधित कोई समस्या लगातार हटाया जा रहा हो रही है, कोड की इस पंक्ति से छुटकारा पाने:

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

और से शुरू

$a.removeClass('prev next'); 

या: हैंडलर, साथ बदलें

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

Answer 3

आप इस

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

की तरह घटना श्रोताओं जोड़ने से बच करने के लिए प्रयास करना चाहिए यह है पर्याप्त (और अधिक कुशल) इस तरह एक श्रोता संलग्न करने के लिए:

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

भी jQuery 1।3 द्वारा प्रस्तुत .live() (http://api.jquery.com/live/ देख)

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

एक तत्व है कि चयनकर्ता से मेल खाता है, जब .live() कहा जाता है चाहे वह मौजूद या बाद में बनाई गई है द्वारा फेंका किसी भी घटना, निर्दिष्ट कार्य करने के लिए पारित हो जाएगा।