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

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

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

}

Answer 3

你可以迭代它们：

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 4

不，它不相似。

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

jQuery一个带有多个选择器的类名

4 个答案: