यह निर्धारित करने के लिए कि तत्व जावास्क्रिप्ट/jquery में माता-पिता का अंतिम या पहला बच्चा है या नहीं?

Question

मेरे पास निम्न कोड है, बाएं या दाएं कुंजी घटनाओं पर एक क्लिक अनुकरण।

$(document).keydown(function (e) { 
        if(e.keyCode == 37) { // left 
         $(".thumb-selected").prev().trigger('click'); 
        } 
        else if(e.keyCode == 39) { // right 
         $("thumb-selected").next().trigger('click'); 
        } 
       }); 

मूलतः यह अगले या पिछले भाई (दबाया कुंजी के आधार पर) उठाता है और क्लिक करें घटना है कि बदले में गैलरी में उचित छवि प्रदर्शित करेगा फोन: यह एक गैलरी स्लाइड शो के हिस्से के रूप में किया जाता है। ये छवियां सभी एक अनियमित सूची में संग्रहीत हैं।

जहां मैं स्टंप हूं, यह है कि जब पहली या आखिरी छवि का चयन किया जाता है और बाएं या दायां बटन क्लिक किया जाता है (क्रमशः), तो मैं छवियों की सूची के विपरीत छोर पर अगली तस्वीर प्राप्त करना चाहता हूं। उदाहरण के लिए, यदि पहली छवि का चयन किया गया है और बायां तीर दबाया गया है; यह देखते हुए कि कोई पिछली छवि (या ली तत्व) नहीं है, इसे सूची में अंतिम छवि मिल जाएगी। इस तरह चाबियाँ कार्यक्षमता कभी नहीं खोती हैं।

क्या jquery में कोई फ़ंक्शन है जो या तो जांच करेगा कि वर्तमान तत्व अपने माता-पिता का पहला या आखिरी बच्चा है या उसके सूचकांक को इसके माता-पिता के सापेक्ष वापस कर दें ताकि मैं इसकी अनुक्रमणिका को आकार() (बाल गणना) से तुलना कर सकूं) अपने मूल तत्व के?

Answer 1

var length = $('#images_container li').length; 
    if(e.keyCode == 37) { // left 
     if($('.thumb-selected').index() > 0) 
       $(".thumb-selected").prev().trigger('click'); 
     else 
       $('.thumb-container').eq(length-1).trigger('click'); 
    } 

    else if(e.keyCode == 39) { // right 
     if($('.thumb-selected').index() < length-1) 
      $("thumb-selected").next().trigger('click'); 
      else 
       $('.thumb-container').eq(0).trigger('click'); 
    } 

.thumb-container की मूल तत्व है सभी अंगूठे कम से कम मुझे आपके कोड से क्या मिला।

एचटीएमएल

<ul class="thumb-container"> 
     <li>thumb</li> 
     <li>thumb</li> 
      . 
      . 
      . 
    </ul> 

Answer 2

आप index() का उपयोग कर सकते हैं जो तत्व की अनुक्रमणिका देता है या आप एक और तत्व है या नहीं, यह जांचने के लिए आप पिछला() और अगला() का उपयोग कर सकते हैं।

if(e.keyCode == 37) { // left 
    if($(".thumb-selected").prev().length > 0)){ 
     $(".thumb-selected").prev().trigger('click'); 
    }else{ 
     //no more elements      
     } 
} 
else if(e.keyCode == 39) { // right 
    if($(".thumb-selected").next().length > 0)){ 
     $(".thumb-selected").next().trigger('click'); 
    }else{ 
     //no more elements      
     } 
} 

संपादित करें - मैं कोड है क्योंकि यह अगले उपयोग करने के लिए और अधिक समझ में() और पिछले (बनाता है) nextAll() और prevAll() के बजाय अद्यतन

Answer 3

आप परीक्षण करने के लिए is()^[docs] विधि का उपयोग कर सकते हैं:

if($(".thumb-selected").is(':first-child')) { 
    // whatever 
} else if($(".thumb-selected").is(':last-child')) { 
    // whatever 
}