1

私はこのようなHTMLを持っています：

<div id="content">
    <div class="view-row view-row-1">
    <div class="view-row view-row-2">
    <div class="view-row view-row-3">
    <div class="view-row view-row-4">
    <div class="view-row view-row-5">
    <div class="view-row view-row-6">
</div>

行にCSSスタイルを追加する必要があります-2, 5, 8, 11, 14など。多くの.view-row-number要素が存在する可能性があります。たとえば、40個です。

$('.content .view-row').each( function(i) {
    if ($(this).hasClass('view-row-2') ) {
        $(this).css('padding-left', '7px');
    }
    else if($(this).hasClass(?)) {
    }
});

これを達成するための最良の方法は何ですか？

4

4 に答える 4

7

nth-child次のようなセレクターを使用します。

$("#content .view-row:nth-child(3n-1)").addClass("highlight");

フィドルの例

次に、必要なスタイルをCSSクラスに入れて、関心の分離を適切に維持できます。

于 2012-11-23T13:25:08.060 に答える
4

サイクルでイテレータを使用しているので、次のことができます。

$('.content .view-row').each( function(i) {
    if ((i + 2) % 3 == 0) { $(this).css('padding-left', '7px'); }
});

または、css3セレクターのnth-of-typeを使用します。

$('.content .view-row:nth-of-type(3n-1)').css('padding-left', '7px');
于 2012-11-23T13:24:02.093 に答える
3

複雑にしすぎないでください-

$('#content div:nth-child(3n-1)').addClass('foo');
于 2012-11-23T13:25:57.053 に答える
0 
var num = 2;
$('.content .view-row').each( function(i) {
            if ($(this).hasClass('view-row-'+num) ) {
                num = num + 3;
                $(this).css('padding-left', '7px');
            }
            else if($(this).hasClass(?)) {

            }
           });
于 2012-11-23T13:22:49.467 に答える