6

私は次のコードを持っています：

html：

<div class="container">
    <div class="selected">A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
</div>
<button id="next">next!</button>

jQuery：

$("#next").click(function() {
    $(".selected").removeClass("selected").next().addClass("selected");
});

私が欲しいのは、コンテナ内のdivをループすることです。私はこれを循環させることができます：

$("#next").click(function() {
    if ($(".selected").next().length == 0) {
        $(".selected").removeClass("selected").siblings(":nth-child(1)").addClass("selected");
    }
    else {
        $(".selected").removeClass("selected").next().addClass("selected");
    }
});

しかし、もっと簡単な方法があると思います。どうすれば簡単にできますか？（関数を使用しなくてもかまいませんnext()）。

jsFiddle： http: //jsfiddle.net/S28uC/

4

4 に答える 4

13

siblings.first()の代わりにしたいのsiblings(":nth-child(1)")ですが、本質的には、のバリアントを使用せずにラップアラウンドすることはできませんnext().length。

更新：私がこれを最初から書いていた場合、これは私がそれを行う方法です：

$("#next").click(function() {
    var $selected = $(".selected").removeClass("selected");
    var divs = $selected.parent().children();
    divs.eq((divs.index($selected) + 1) % divs.length).addClass("selected");
});

このアプローチは、次の2つの要因によって動機付けられています。

  1. コレクションを無期限に循環させたい場合、モジュロが頭に浮かびます
  2. ifよりスマートに見えるコードを取り除く

好みの問題として、私が同等のものdivsよりも好む値を設定するとき、事実上無限の可能性があります。$selected.parent().children()$selected.siblings().add($selected)

于 2011-09-14T10:14:08.363 に答える
0

簡単な方法の1つはこれです：

$("#container").find("div:eq(0)").addClass("selected");
于 2011-09-14T10:14:55.820 に答える
0

これを試すことができます

var  cont   = $('.container'),
     i      = 0;
$("#next").on('click', function() {
    cont.children().removeClass('selected');
    i += 1;
    if ( i === document.querySelectorAll('.container div').length ) { i = 0; }
    cont.children().eq(i).addClass('selected');
});


var cont	= $('.container'),
	i 	    = 0;
    
$("#next").on('click', function() {
    cont.children().removeClass('selected');
    
    // increase index for each click
    i += 1;
    // reset i if it reached to last index
    //(hack to force next to go back to first element when we are at the end)
    if ( i === document.querySelectorAll('.container div').length ) {
    		i	=	0;
    }
  
    cont.children().eq(i).addClass('selected');
});
.selected {
    background-color: yellow;   
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="selected">A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
</div>

<button id="next">next!</button>

単純に、クリックするたびに増加し、最後 ( s 長さ) にi達するとリセットされます。div

于 2016-05-26T20:45:25.990 に答える