1

私はアイテムのリストを持っています、全部で10、しかしもっと持っています...

ユーザーが「価格」または「アルファベット順」でアイテムを表示できる「並べ替え」機能があります。

これは正常に機能します。私が抱えている問題は、リスト内の5番目の子を取得するために使用しているセレクターラインがバグアウトしていることです。

コード行は次のとおりです。

$("#list-category-results li:nth-child(5n)").css("margin-right", "0");

また、これが私の現在の進捗状況のjsFiddleです。

「価格」または「アルファベット順」をクリックすると、「margin-right：0」の配置が5番目の要素に留まらず、理由がわかりません。

4

2 に答える 2

4

次の行をやり直す必要があります。

$("#list-category-results li:nth-child(5n)").css("margin-right", "0");

ソートするたびに。

CSSルールにない限り、子を並べ替えたからといって自動的に発生するわけではありません。jQuery を使用して CSS スタイルを追加すると、それらのスタイルが特定の要素に直接追加され、それらの要素がDOM ツリー内を移動しても、それらのスタイルが保持されます。

したがって、位置が変更されたアイテムの CSS スタイルも削除する必要があります。

$("#list-category-results li")
    .css('margin-right', '')      // clear all <li> margins
    .filter(':nth-child(5n)')
    .css('margin-right', '0px');  // set every 5th <li> margin
于 2012-09-04T21:29:32.770 に答える
1

click並べ替えボタンのイベントにバインドし、margin-rightすべての値を削除してli、次のように 5 番目の項目に再適用できます。

$(document).ready(function(){
    // Apply margin-right: 0 on DOM Ready //
    $("#list-category-results li:nth-child(5n)").css("margin-right", "0");    

    // Update margin-right on Sorting of Elements //
    $('.btnSort').bind('click', function(){
        $("#list-category-results li").css('margin-right', '');
        $("#list-category-results li:nth-child(5n)").css("margin-right", "0");
    });
});

ここで JSFiddle を更新しました

これが役立つことを願っています！

于 2012-09-04T21:31:18.747 に答える