0

データベースから入力しているページに関しては、jquerys セレクターの使用に問題があります。

<li>データベースは、行数 x に対して行ごとに4 つのタグを表示する を取り込みます。

addClass を使用して<ul>、異なるクラスの各行の最初と最後の結果を取得しようとしています。

私は :first と :last を試しましたが、これらは明らかに最初の結果と最後の結果に必要なクラスを追加するだけです。4 の各行の最初と最後に追加する必要があります。

私の現在のコードは次のとおりです。

   $(document).ready(function(){
    $("ul#display li.thumbs:first").addClass("start");
    $("ul#display li.thumbs:last").addClass("end");
  });

HTML の例

    <ul>
    <li><a href="/images/">image 1</a></li>
    <li><a href="/images/">image 2</a></li>
    <li><a href="/images/">image 3</a></li>
    <li><a href="/images/">image 4</a></li>
    <li><a href="/images/">image 5</a></li>
    <li><a href="/images/">image 6</a></li>
    <li><a href="/images/">image 7</a></li>
    <li><a href="/images/">image 8</a></li>
    <li><a href="/images/">image 9</a></li>
    <li><a href="/images/">image 10</a></li>
    <li><a href="/images/">image 11</a></li>
    <li><a href="/images/">image 12</a></li>
    </ul>
4

5 に答える 5

3

この質問に対する受け入れられた回答を参照してください。これには、基本的にeach()インデックス番号と一緒に使用することが含まれiます。モジュラス演算子を適用して、各要素が4つのセットのどこにあるかを確認します。

$(document).ready(function(){
    $("#display li.thumbs").each(function(i) { 
        if (i % 4 == 0) 
           $(this).addClass("start");
        if (i % 4 == 3) 
           $(this).addClass("end");
    });
});
于 2009-09-05T14:43:33.460 に答える
2

nth-childセレクターを使用できます。

$("ul li:nth-child(4n-3)").addClass("start");
$("ul li:nth-child(4n)").addClass("end");

マークアップでサンプルを確認します。

于 2009-09-05T15:02:16.113 に答える
1

http://docs.jquery.com/Selectors

これは、 「クリックしていくつかの jquery セレクターを表示する」の下にある私のテスト ページのサンプル コードです。

    // JS THAT DO THE JOB FOR JQUERY SELECTORS
    $('#jquerySelectorsUl li:nth-child(7)').addClass('alert');
    $('#jquerySelectorsUl li a[title=test]').addClass('alert');
    // JS THAT DO THE JOB FOR LI ADD/REMOVE
    var i = $('#addRemove li').size();
    $('#add').click(function() {
        i++;
        $('<li>' + i + '</li>').appendTo('#addRemove');
    });
    $('#remove').click(function() {
        $('#addRemove li:last').remove();
        if (i != 0){
            i--;
        };
    });

たぶん、これは本当に簡単な答えではありませんが、あなたを助けるでしょう... :)

于 2009-09-05T14:36:31.663 に答える
1 
$(document).ready(function(){
    $("ul#display li.thumbs:first-child").addClass("start");
    $("ul#display li.thumbs:last-child").addClass("end");
});

first-childlast-childそれらが直接の親の最初/最後の子である場合、リスト項目を取得します。そのため、と 最初の のclass="thumbs"間にないリスト項目がある場合、最初のセレクターとの一致はありません。<ul><li class="thumbs">

于 2009-09-05T14:37:19.557 に答える
0

次のような場合に、セットを構成する数について考えを変えることができるのが好きです。

    var per_set = 4;
    $('ul li').each(function(index){
        if (index % per_set === 0) {
            $(this).addClass("start");
        } else if (index % per_set === (per_set-1)) {
            $(this).addClass("end");
        }
    });
于 2009-09-05T15:11:35.727 に答える