一页上有几个独立的jquery代码

我打算在我的项目中使用这个简单的股票代码概念

这个ticker还可以，但我打算在一个页面上同时使用一堆（这个）ticker，因为它们将由PHP自动生成

一个页面上可以同时有3个这样的标签，最多20个，当然有不同的内容

我怎样才能让它们都像第一个一样工作，“移动”良好，使用特色HTML

附加提示：暂停悬停将是一个加号，谢谢

JS

function tick(){
    $('#ticker li:first').slideUp( function () { $(this).appendTo($('#ticker')).slideDown(); });
}
setInterval(function(){ tick () }, 5000);

.ticker {
    height: 40px;
    overflow: hidden;
    background:#c1c1c1;
}
.ticker li {
    height: 40px;
}

HTML

<div><ul class="ticker" id="ticker">
    <li>
        One.
    </li>
    <li>
        Two.
    </li>
    </ul></div>

<div><ul class="ticker" id="ticker1">
    <li>
        3.
    </li>
    <li>
        4.
    </li>
    </ul></div>

<div><ul class="ticker" id="ticker2">
    <li>
        Five.
    </li>
    <li>
        Six.
    </li>
    </ul></div>

---

您只针对集合中的第一个

li

，即整个集合。您需要循环浏览每个股票代码，然后在每个

li:first

上执行动画。将它附加到

closest（）

ticker，您就可以：

function tick(){
    $('.ticker').each(function(){
        $(this).find('li:first').slideUp(function () {
            $ticker = $(this).closest('.ticker');
            $(this).appendTo($ticker).slideDown();
        });
    });
}
setInterval(tick, 5000);

---

我更喜欢oGeez的答案，而不是我自己的答案（这确实应该是一个评论，而不是像这样编辑我的答案，但我还没有评论的能力…）

不过，我要指出的是，您应该能够添加功能，以便在鼠标悬停在元素上时使用jquery hover（）方法将类附加到被鼠标悬停的元素上。从这里开始，您只需在将要更新的ticker列表中不包括暂停类的ticker

function tick(){
    $('.ticker').not(".paused").each(function(){
        $(this).find('li:first').slideUp(function () {
            $ticker = $(this).closest('.ticker');
            $(this).appendTo($ticker).slideDown();
        });
    });
}
setInterval(tick, 5000);

$(".ticker").hover(     
    (function () {          
        $(this).addClass("paused")      
    }),      
    (function () {          
        $(this).removeClass("paused")      
    }) 
);

我更新了我的JSFIDLE分叉，以反映oGeez的答案，并能够通过鼠标悬停在股票代码上