Add css style to all elements with specific class in jQuery

Question

I have some lists in my page which are the same

<ul class="tabItem">
    <li class="active">
        <hr>
        <a href="#tab-1">tab1</a>
        <hr>
    </li>
    <li>
        <hr>
        <a href="#tab-2">tab2</a>
        <hr>
    </li>
    ...
</ul>

How can I add css to all <ul>tags with .tabItem class at the whole page using jQuery?

Currently I'm doing this, which works only on the first <li> childs

$(".tabItem li").children('hr').eq(0).css({"transform": "translateY(-12px)"});
$(".tabItem li").children('hr').eq(1).css({"transform": "translateY(12px)"});

Just to confirm, you want to get the first two <li> in .tabItem? — Jacob G
– Jacob G, Commented Feb 16, 2015 at 18:26
@JacobGray Yes! I'm using this in .tabItem li:hover to add effects. And I need this to add to all hrs in the all <li> tags — Ghasem
– Ghasem, Commented Feb 16, 2015 at 18:26

Chris Pietschmann · Accepted Answer · 2015-02-16 18:27:43Z

6

Here's all ul tags with .tabItem class:

$('ul.tabItem').css({ });

Here's the child action you're attempting:

$('ul.tabItem li hr:first-child').css({"transform": "translateY(-12px)"});
$('ul.tabItem li hr:last-child').css({"transform": "translateY(12px)"});

Although just using CSS would be better:

ul.tabItem li hr:first-child {
    transform: translate(-12px);
}
ul.tabItem li hr:last-child {
    transform: translate(12px);
}

Using CSS method then there's no JavaScript necessary.

answered Feb 16, 2015 at 18:27

Chris Pietschmann

29.9k36 gold badges124 silver badges167 bronze badges

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

3 Comments

Ghasem Over a year ago

I need the jQuery cause i'm using this for adding effect in mouse move. So I used your jQuery code and it worked. Thanks :)

Chris Pietschmann Over a year ago

could you use the ":hover" CSS selector to add the affect on mouse hover over the LI tag?

Ghasem Over a year ago

Yes. But then I need to remove the transform after mouse leaving

Runcorn · Accepted Answer · 2015-02-16 18:34:27Z

2

$('ul.tabItem').css({"transform": "translateY(-12px)"});

or for hr tag

$('ul.tabItem hr').css({"transform": "translateY(-12px)"});

edited Feb 16, 2015 at 18:34

Runcorn

5,2245 gold badges37 silver badges52 bronze badges

answered Feb 16, 2015 at 18:28

Alex Olkhovskii

1364 bronze badges

Comments

Pedro Estrada · Accepted Answer · 2015-02-16 18:25:17Z

0

you can do this with just css no need to use jquery

like so:

<style>
.tabItem hr {
    transform: translateY(-12px)
}
</style>

answered Feb 16, 2015 at 18:25

Pedro Estrada

565 bronze badges

Comments

Alpha · Accepted Answer · 2015-02-16 20:32:17Z

0

$("ul.tabItem").addClass("yourClass");

With this, you can add a class to all of the elements that have the class tabItem already. In your class you can add all the styles that you need to provide, which is usually a better practice than just assigning it to the element itself.

If you still want to assign the styles directly, take a look at the css method in jQuery.

edited Feb 16, 2015 at 20:32

Alpha

7,9188 gold badges61 silver badges96 bronze badges

answered Feb 16, 2015 at 18:24

JBA

2,9091 gold badge24 silver badges40 bronze badges

1 Comment

JBA Over a year ago

I understand this... however the answer does not seem too bad regarding the question itself How can I add css to all <ul>tags with .tabItem class at the whole page using jQuery?

Collectives™ on Stack Overflow

Add css style to all elements with specific class in jQuery

4 Answers 4

3 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related