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

}