jQuery: अगली() अंत तक पहुंचने पर कैसे पता लगाएं, फिर पहले आइटम पर जाएं

Question

मैं अगले() फ़ंक्शन का उपयोग करके तत्वों की एक श्रृंखला प्रदर्शित कर रहा हूं। एक बार जब मैं अंत तक पहुंच जाता हूं, तो मैं पहले तत्व पर जाना चाहता हूं। कोई विचार?

कोड यह रहा:।

//Prev/Next Click 
$('.nextSingle').click(function() { 
    //Get the height of the next element 
    var thisHeight = $(this).parent().parent().parent().next('.newsSingle').attr('rel'); 
    //Hide the current element 
    $(this).parent().parent().parent() 
     .animate({ 
      paddingBottom:'0px', 
      top:'48px', 
      height: '491px' 
     }, 300) 
     //Get the next element and slide it in  
     .next('.newsSingle') 
     .animate({ 
      top:'539px', 
      height: thisHeight, 
      paddingBottom:'100px' 
     }, 300); 
}); 

मूल रूप से मैं एक "अगर" बयान है कि कहते हैं, "अगर कोई शेष 'अगले' तत्व हैं, तो पहले एक को खोजने की जरूरत है

धन्यवाद

!

Answer 1

.next() निर्धारित समय से आगे अपने length संपत्ति की जाँच करके।

$('.nextSingle').click(function() { 
     // Cache the ancestor 
    var $ancestor = $(this).parent().parent().parent(); 
     // Get the next .newsSingle 
    var $next = $ancestor.next('.newsSingle'); 
     // If there wasn't a next one, go back to the first. 
    if($next.length == 0) { 
     $next = $ancestor.prevAll('.newsSingle').last();; 
    } 

    //Get the height of the next element 
    var thisHeight = $next.attr('rel'); 

    //Hide the current element 
    $ancestor.animate({ 
      paddingBottom:'0px', 
      top:'48px', 
      height: '491px' 
     }, 300); 

     //Get the next element and slide it in  
    $next.animate({ 
      top:'539px', 
      height: thisHeight, 
      paddingBottom:'100px' 
     }, 300); 
}); 

वैसे, आप .closest('.newsSingle') साथ .parent().parent().parent() की जगह सकता है (अपने मार्कअप यह अनुमति दे)।

संपादित करें: मैंने thisHeight को $next तत्व का उपयोग करने के लिए सही किया है जिसे हमने संदर्भित किया है।

$.fn.nextOrFirst = function(selector) 
{ 
    var next = this.next(selector); 
    return (next.length) ? next : this.prevAll(selector).last(); 
}; 

$.fn.prevOrLast = function(selector) 
{ 
    var prev = this.prev(selector); 
    return (prev.length) ? prev : this.nextAll(selector).last(); 
}; 

बजाय::

var $next = $ancestor.next('.newsSingle'); 
    // If there wasn't a next one, go back to the first. 
if($next.length == 0) { 
    $next = $ancestor.prevAll('.newsSingle').last();; 
} 

यह होगा:

$next = $ancestor.nextOrFirst('.newsSingle'); 

संदर्भ

Answer 2

jquery दस्तावेज़ीकरण के अनुसार, एक खाली jquery ऑब्जेक्ट .length 0

तो आपको क्या करना होगा, जब आप कॉल करते हैं तो वापसी की जांच करें .next, a nd तो कहते हैं: पहला

http://api.jquery.com/next/

Answer 3

एक उपयोगी संदर्भ के रूप में, निम्नलिखित एक समारोह आप लिख सकते हैं और शामिल कर सकते हैं: http://www.mattvanandel.com/999/jquery-nextorfirst-function-guarantees-a-selection/

Answer 4

आप इन कार्यों का उपयोग यह देखने के लिए कर सकते हैं कि वर्तमान आइटम पहला/अंतिम बच्चा है या नहीं।

jQuery.fn.isFirst = function() { return (this[0] === this.parent().children().first()[0]); }; 
jQuery.fn.isLast = function() { return (this[0] === this.parent().children().last()[0]); }; 

if($ancestor.isLast()) 
{ 
    // ... 
} 
else 
{ 
    // ... 
}