Jquery - 變量被索引整個dom而不是在每個實例

Question

所以我有一個頁面即時通訊嘗試添加一個快速循環通過項目列表的翻轉部分 - 但是當我有兩個獨立的列表在頁面上的列表項目一起索引爲一個大列表，而不是兩個較小的列表。

本質上可變索引列表中的所有而不是在每個列表的運行

jQuery的

<script type="text/javascript"> 

     jQuery('.flipper').each(function() { 

(function flipperexec() { 
    var quotes = jQuery('.flipper').children(".content"); 
    var quoteIndex = -1; 
function showNextQuote() { 
     ++quoteIndex; 
     quotes.eq(quoteIndex % quotes.length).fadeIn(50).delay(100).fadeOut(50, showNextQuote); 
} 
showNextQuote(); 
})(); 

     }); 
    </script> 

一個例子的HTML表1和2

<ul class="flipper"><li class="content" style="display: none;">classes</li><li class="content" style="display: none;">coffee</li><li class="content" style="display: inline-block;">taste</li></ul> 


<ul class="flipper"><li class="content" style="display: none;">classes</li><li class="content" style="display: none;">coffee</li><li class="content" style="display: inline-block;">taste</li></ul> 

Answer 1

的項目的這是因爲您在每個迴路中選擇了IIFE內部的所有$('.flipper')元素：

$('.flipper').children(".content"); 

您需要引用正在迭代的當前.flipper元素。您既可以設置this外IIFE的價值：

Example Here

$('.flipper').each(function(i, el) { 
    (function flipperexec() { 
    var quotes = $(el).children(".content"); 
    var quoteIndex = -1; 

    function showNextQuote() { 
     ++quoteIndex; 
     quotes.eq(quoteIndex % quotes.length).fadeIn(50).delay(100).fadeOut(50, showNextQuote); 
    } 
    showNextQuote(); 
    })(); 
});