3

無視: http://jsfiddle.net/gulcoza/9cVFT/1/

更新されたフィドル: http://jsfiddle.net/gulcoza/9cVFT/4/

コード全体は上記のフィドルにありますが、ここでも説明します。

HTML

<ul>
    <li id="e1">1</li>
    <li id="e2" class="hidden">2</li>
    <li id="e3">3</li>
    <li id="e4" class="hidden">4</li>
    <li id="e5">5</li>
    <li id="e6">6</li>
    <li id="e7">7</li>
    <li id="e8">8</li>
    <li id="e9">9</li>
    <li id="e10">10</li>
</ul>

jQuery

console.log(
    $('ul li:visible:nth-child(4n)')
);

期待される結果: li#e6, li#e10 - なぜ? 目に見えるものからのみ4n要素が必要だからです。

しかし

実際の結果:表示されている場合にのみ、すべてから 4n 要素を取得します。

console.log(
    $('ul li:visible').filter(function(index) {
        if ((index + 1) % 4 ==0) return true;
    })
);

次のソリューションよりも優れたソリューションに興味があります。

console.log(
    $('ul li:visible').filter(function(index) {
        if ((index + 1) % 4 ==0) return true;
    })
);

更新されたフィドル:

http://jsfiddle.net/gulcoza/9cVFT/4/

なぜ4番がうまくいかないのですか？フィルターが呼び出された時点で、結果は既にフィルター処理されているはずです。:|

// 4 - could be a nice solution
console.log(
    $('ul li:visible').filter(':nth-child(4n)')
);

なぜこれが機能しないのですか？現時点$('ul li:visible')では、目に見えるものだけが利用できるはずです。

4

2 に答える 2

1

ご存知のように、これを行う最善の方法はあなたのやり方です。

これが期待どおりに機能しなかった理由は、:nth-child疑似セレクターが親要素内の位置に基づいて要素を選択しているためです。

また、セレクター文字列はCSSセレクターの文字列であり、JavaScript とは関係がないことに注意してください。

ここでJS/CSSに関する別の質問に対する良い答えを見つけました

次のような独自のメソッドを作成することをお勧めします。

$.fn.nthChildren = function(n){
    this.filter(function(index) {
        if ((index + 1) % n ==0) return true;
    })
}
console.log(
    $('ul li:visible').nthChildren(4);
);
于 2013-05-30T13:47:14.263 に答える