jQuery複数のセレクタを持つ1つのクラス名

Question

jQueryコードを書くためにもっと整然とした方法があるのではないかと心配しています。 私はこのインターネットを探していましたが、例は見つけられません。

異なるCSS設定の異なるセレクタを持つ3つの重複したクラス名があります。私はそれがきれいにコーディングされているかどうか知りたいです。

if ($(this).hasClass('toggle')) { 


    $(".toggle > span:first").css({ 
     // something... 
    }); 

    $(".toggle > span:nth-child(2)").css({ 
     // something... 
    }); 

    $(".toggle > span:last").css({ 
     // something... 
    }); 

} 

SCSSの方法に似ていますか？以下のように

.toggle { 
    span { 
     &:first-child { // something... } 
     &:nth-child(2) { // something... } 
     &:last-child { // something... } 
    } 
} 

ありがとうございました。

Answer 1

あなたは.end()

$(".toggle") 
.children("span:first").css({"color":"blue"}) 
.end() 
.children("span:nth-child(2)").css({"color": "green"}) 
.end() 
.children("span:last").css({"color": "red"}); 

あるいは、（.filter使用を使用することができます）

$(".toggle") 
.children("span") 
.filter(":first").css({"color":"blue"}) 
.end() 
.filter(":nth-child(2)").css({"color": "green"}) 
.end() 
.filter(":last").css({"color": "red"}); 

Answer 2

あなたはそれらの上に反復処理することができます

var i = 0; 
$(".toggle span").each(function($obj) { 
    console.log('Now i is ' + i); 
    console.log($obj); 
    switch (i) { 
     case 0: 
     //do something 
     break; 
     //and so on, or call a function with obj and i. 
    } 

    i++; 
}); 

あなたはまた、あなたのクラスにdata-idまたはdata-anythingを追加することができます。

Answer 3

いいえ、それは似ていません。

if ($(this).hasClass('toggle')) {  

    $(".toggle > span:first").css({ 
     // something... 
    }); 

    $(".toggle > span:nth-child(2)").css({ 
     // something... 
    }); 

    $(".toggle > span:last").css({ 
     // something... 
    }); 

} 

のようになります。申し訳ありません

.toggle { 
    > span { 
     &:first-child { // something... } 
     &:nth-child(2) { // something... } 
     &:last-child { // something... } 
    } 
} 

Answer 4

if ($(this).hasClass('toggle')) { 

    $('.toggle > span') 
     .first().css({ 
      // something... 
     }) 
     .end().eq(2).css({ 
      // something... 
     }) 
     end().last().css({ 
      // something... 
     }); 

}