jQuery अगला लूप पहले बच्चे को वापस नहीं जा रहा है

Question

मैं वर्तमान में भाई तत्वों के माध्यम से लूप करने की कोशिश कर रहा हूं लेकिन लूप को पहले भाई में वापस नहीं जा सकता।

मैं nextOrFirst समारोह के रूप में देखा उपयोग कर रहा हूँ here

मैं मैं क्या इस fiddle

एचटीएमएल

<div id="stories"> 
    <div class="swapper"><p>number 1</p></div> 
    <div class="swapper"><p>number 2</p></div> 
    <div class="swapper"><p>number 3</p></div> 
</div> 

में प्राप्त करने के लिए जावास्क्रिप्ट

$(document).ready(function() { 

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

setInterval(

    function swap() { 

     $(".swapper").each(function() { 

      var nextItem = $(this).nextOrFirst(); 

      $(this).html($(nextItem).html()); 

      return; 

     }); 

    }, 5000); 

}); 

कोशिश कर रहा हूँ दोहराया गया है

Answer 1

आप एक ही कोड जारी रखने के लिए इस लाइन की जगह ले सकता

$ (this) .html ($ (nextItem) .html());

इस

$ (यह) के साथ।insertBefore ($ (nextItem));

Answer 2

क्यों न केवल अंतिम तत्व को शीर्ष पर ले जाएं और से हटाने पिछले एक

setInterval(

    function swap() { 
     var $container = $("#stories"); 
     $container.prepend($container.find('.swapper:last').html());// move last to top 
     $container.find('.swapper:last').remove(); // remove last 
    }, 2000); 

मैं तुम्हें कुछ इस तरह पहुँचने की कोशिश कर लगता है: jsfiddle

Answer 3

यहाँ एक बहुत ही सरल तरीका है। इसके बजाय अगले आइटम पर वर्तमान आइटम का HTML गुण स्थापित करने के लिए, बस इस तरह insertAfter का उपयोग करें:

http://jsfiddle.net/jgk8B/5/

$(document).ready(function() { 

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

    setInterval(

     function swap() { 

      $(".swapper").each(function() { 

       $($(this).nextOrFirst()).insertAfter($(this)); 

       return; 

      }); 

    }, 500); 
}); 

Answer 4

मुझे लगता है कि यह सही ढंग से काम कर रहा है (लेकिन शायद के रूप में आप की परिकल्पना नहीं की)। .each() समारोह

• पहला तत्व "नंबर 2" पर सेट है के पहले चरण में (दूसरा तत्व का मान)
• तो दूसरा तत्व को "नंबर 3" (का मान सेट है तीसरा तत्व)
• अंत में तीसरे तत्व के लिए "संख्या 2" जो अब पहले तत्व का मूल्य है

Answer 5

यह अपने विधि nextOrFirst() को ठीक है सेट कर दिया जाता है, लेकिन जब आप पाश each, वहाँ फोन एसएचएच है गलत।

पहली बार आपको nextItem मिलता है, तो आप पहले तत्व का पाठ number 2 में बदलते हैं। तो आप बस number 2 प्राप्त कर सकते हैं जब 3th बार जब आप nextItem के रूप में पहला तत्व मिलता है, और अपने html दिखाएगा:

number 2 
number 3 
number 2 

क्यों अपने पाश वापस पहले करने के लिए नहीं जा सकते है यही कारण है कि: यह आपके nextOrFirst ठीक है, लेकिन आपके each के साथ गलत है।

धन्यवाद, एडीसन