0

継続的にループするjQueryカルーセルを作成しようとしています。ユーザーが「回転」を選択すると、.after（）メソッドを使用して、最初のliが最後のliの後に配置されます。これは初めてのみ機能します。その後、liは自分自身を再配置しません。これが私のHTMLです：

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

<a href="#">Rotate</a>

そしてこれが私のJavaScriptです：

var list = $('ul'),
    firstItem = list.find('li:first'),
    lastItem = list.find('li:last');

$('a').on('click', function(){
    lastItem.after( firstItem );
});

これがフィドルです：http：//jsfiddle.net/brianeoneill/76BP8/

前もって感謝します！

4

5 に答える 5

2

コードを実行するたびに、同じ要素（1）が。の後に配置され3ます。

再配置を続けたい場合は、毎回変数をに再設定する必要があり:firstます:last。

于 2013-03-12T14:57:47.613 に答える
2

クリック機能内にセレクターを配置します。

var list = $('ul');
$('a').on('click', function(){
    var firstItem = list.find('li:first'),
    lastItem = list.find('li:last');
    lastItem.after( firstItem );
});

jsFiddleの例

クリックイベントの外にそれらを保持することにより、毎回選択する要素を変更する必要はありません。それらをあなたの中に動かすことによってあなたはそうです。

于 2013-03-12T14:58:44.900 に答える
1 
var list = $('ul');

$('a').on('click', function(){
    firstItem = list.find('li:first'),
    lastItem = list.find('li:last');

    lastItem.after( firstItem );
});

http://jsfiddle.net/76BP8/2/

于 2013-03-12T15:00:04.613 に答える
0

要素を挿入すると、要素がまだ挿入されている場合は移動します。

ここでは、同じ場所で同じ挿入を繰り返していますが、新しいことは何もしません。

于 2013-03-12T14:57:48.580 に答える
0

変数を更新していないため、最初の項目と最後の項目は常に同じになります。

選択範囲を外部に保持したい場合の代替手段は次のとおりです。

var list = $('ul'),
    firstItem = function(){
        return list.find('li:first');
    },
    lastItem = function(){
        return list.find('li:last');
    };

$('a').on('click', function(){
    lastItem().after( firstItem() );   
});

http://jsfiddle.net/76BP8/3/

于 2013-03-12T15:02:09.167 に答える