jQuery one class name with multiple selectors

Question

My coding is working fine, just wondered if there is more tidy way to write jQuery code? I was searching for this internet but cant find examples.

There are three duplicated class name with different selectors having different CSS settings. I would like to know if there is clean coding for this.

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


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

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

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

}

Is there similar to SCSS way? Like below

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

Thank you for taking time to look into this.

msapkal · Accepted Answer · 2016-09-02 13:54:19Z

2

You can use .end()

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

Or, use .filter()

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

edited Sep 2, 2016 at 13:54

answered Sep 2, 2016 at 13:47

msapkal

8,3462 gold badges34 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mr. Over a year ago

Your solution was perfect.I think checking this question also can give a good idea. stackoverflow.com/questions/251814/jquery-and-organized-code/…

score 1 · Accepted Answer · 2016-09-02 13:58:20Z

1

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

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

}

edited Sep 2, 2016 at 13:58

answered Sep 2, 2016 at 13:51

user6748331

Comments

vaso123 · Accepted Answer · 2016-09-02 13:35:15Z

0

You can iterate through on them:

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

You can also add data-id or data-anything to your classes.

answered Sep 2, 2016 at 13:35

vaso123

12.4k4 gold badges38 silver badges68 bronze badges

Comments

Artem Gorlachev · Accepted Answer · 2016-09-02 13:36:11Z

0

No, it`s not similar.

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

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

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

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

}

is similar to:

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

answered Sep 2, 2016 at 13:36

Artem Gorlachev

6175 silver badges9 bronze badges

2 Comments

hasmai Over a year ago

Sorry I missed to add span in it but I mean, want to know jQuery code, not SCSS. Thanks anyway.

Artem Gorlachev Over a year ago

Sorry, didn't understand your question correctly. I didn't know beauty ways for your question. I`m trying to use additional classname to element and styling childrens with css.

Collectives™ on Stack Overflow

jQuery one class name with multiple selectors

4 Answers 4

1 Comment

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related