javascript - N番目の子をJSに追加できますか?

Question

このコードにある種の Nth Child を追加できるかどうか疑問に思っていましたか?

  $(function() {
    var count = $(".parent a").length;
    $(".parent div").width(function(){
        return ($(".parent").width()/count)-5;
    }).css("margin-right","5px");
  });

私が望むのは、最後の div を無視することですmargin-right

これは可能ですか？

Answer 1

通常、要素が必要ないことを考慮して、、、、など:lastのjQuery セレクターを使用できます。:last-child:last-of-type:not

ただし、ここでの問題は、幅の計算と CSS の適用をいつ、どのように行うかということです。

これをいくつかのステップに分割し、最初に幅の計算を行います。

var count = $(".parent a").length;

$(".parent div").width(function(){
    return ($(".parent").width()/count)-5;
});

次に、最後のdiv以外のすべてに右マージンを適用します。

$(".parent div:not(:last)").css("margin-right","5px");

これでほとんど目的地にたどり着きます。最後の部分は、残った小さなギャップを埋めるだけです。

$(".parent div:last").width(function() {
    return $(".parent div:last").width() + 5;
});

そして、それはあなたが望むことをするはずです。ここで実際の例を見ることができます - http://jsfiddle.net/jUU86/3/。おそらくマージンサイズも変数に置き換えて、変更した場合に複数の場所を置き換える必要がないようにします。

ここで使用されているセレクターの詳細を読むことができます:

• :最後のセレクター
• :セレクターではない

Answer 2

:last-of-type必要なもののようです。最後の子ではなく、タイプ (div) を最後にしたい可能性が高いため、私はこれ:lastを好みます。:last-child

$(function () {
    var count = $(".parent a").length;
    $(".parent div").width(function () {
        return ($(".parent").width() / count) - 5;
    });
    $(".parent div:not(:last-of-type)").css("margin-right", "5px");
});

Answer 3

奇数/偶数に追加できます: count % 2