jQuery一個類名與多個選擇器

Question

我的編碼工作正常，只是想知道是否有更多整潔的方式來編寫jQuery代碼？ 我正在尋找這個互聯網，但無法找到例子。

有三個重複的類名，不同的選擇器具有不同的CSS設置。我想知道這是否有乾淨的編碼。

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... 
     }); 

}