javascript - 2 つの異なるリストをループする — 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を実行し、相互に干渉しないようにします。