javascript - 循环遍历两个不同的列表——jQuery

Question

我制作了一个非常简单的幻灯片。单击箭头将淡出$(this)，下一张幻灯片将fadeIn()使用该next()功能。反之亦然。

但是，当同一页面上有多个幻灯片时，这似乎不起作用。

JSFIDDLE

jQuery：

    $('li').first().siblings().hide();

        $('.next').click(function () {
            $(this)
                .parent('.container')
                .find('li:first-child')
                .fadeOut(function

 () {
            $(this)
                .next()
                .fadeIn()
            $(this)
                .appendTo('ul')
        });

    });

    $('.back').click(function () {
        $(this)
            .parent('.container')
            .find('li:first-child')
            .fadeOut(function () {
            $(this)
                .parent('.container')
                .find('li:last-child')
                .fadeIn()
                .prependTo('ul')
        });

    });

HTML：

<div class="container">
    <ul class="inner_box">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <div class="back">back</div>
    <div class="next">next</div>
</div>

<div class="container">
    <ul class="inner_box">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <div class="back">back</div>
    <div class="next">next</div>
</div>

Answer 1

尝试

$('.container').find('li:first-child').siblings().hide();

$('.next').click(function () {
    var $this = $(this), $ul = $(this).siblings('ul');

    $ul.find('li:first-child').fadeOut(function () {
        var $this = $(this);
        $this.next().fadeIn();
        $this.appendTo($ul)
    });

});

$('.back').click(function () {
    var $this = $(this), $ul = $(this).siblings('ul');

    $ul.find('li:first-child').fadeOut(function () {
        $ul.find('li:last-child').prependTo($ul).fadeIn()
    });

});

演示：小提琴

Answer 2

不是隐藏页面上的第一个 li，而是遍历每个 .inner_box 元素并隐藏除第一个 li 元素之外的所有元素。

$('ul.inner_box').each(function() {
  $(this).find('li').first().siblings().hide();  
});

Answer 3

新 JS（经过测试，在 Fiddle 中工作）

$('.container').each(function() {

    $(this).find('li').first().siblings().hide();

    $(this).find('.next').click(function () {
        $(this)
            .parent('.container')
            .find('li:first-child')
            .fadeOut(function () {
            $(this)
                .next()
                .fadeIn()
            $(this)
                .appendTo('ul')
        });

    });

    $(this).find('.back').click(function () {
        $(this)
            .parent('.container')
            .find('li:first-child')
            .fadeOut(function () {
            $(this)
                .parent('.container')
                .find('li:last-child')
                .fadeIn()
                .prependTo('ul')
        });

    });

});

所以基本上你把整个东西都包进去$('.container').each并调整里面的选择器，这样它就为每个实例做一次整个事情，.container并且它们不会相互干扰。