how do you apply some script to every css element with the same id?

Question

HTML :

<div id="tab">This is a paragraph.</div>
<div id="tab">This is a paragraph.</div>
<div id="tab">This is a paragraph.</div>
<div id="tab">This is a paragraph.</div>

CSS :

#tab{
  height:30px;
  width:130px;
  background-color:red;
}

Jquery :

$(document).ready(function() {
    function randomNumber() {
        return Math.floor(Math.random() * 255)
    }
    $('#tab').mouseover(function() {
        $('#tab').css('background-color', 'rgb(' + randomNumber() + ',' + randomNumber() + ',' + randomNumber() + ')');
    });
    $('#tab').mouseout(function() {
        $('#tab').css('background-color', 'white');
    });
});

I have this fiddle and I want the color change to affect ALL the #tabs, not just the first one, how do i do it?

Fiddle example can be found here.

you need to set same class for this..ids must be unique in a page — swapnesh
– swapnesh, Commented Sep 20, 2012 at 9:11
Can't, because #tabs equals an id (#). and an ID can only be assigned to 1 element, one time. you need to use an class (.), that will work — Mathlight
– Mathlight, Commented Sep 20, 2012 at 9:11

QQping · Accepted Answer · 2012-09-20 09:12:40Z

2

You can only assign an ID once! Change it to classes like this http://jsfiddle.net/nHCXV/3/

answered Sep 20, 2012 at 9:12

QQping

1,3601 gold badge13 silver badges26 bronze badges

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

1 Comment

Paul Browne Over a year ago

perfect, exactly what i was after :)

Oofpez · Accepted Answer · 2012-09-20 09:12:54Z

1

Use a class instead. then you can access them all using

 $('.classname')

answered Sep 20, 2012 at 9:12

Oofpez

5241 gold badge7 silver badges18 bronze badges

Comments

muthu · Accepted Answer · 2012-09-20 09:15:00Z

1

You need to change the id attribute as class because the id is unique. Let try this is in jsfiddle

answered Sep 20, 2012 at 9:15

muthu

5,4892 gold badges35 silver badges41 bronze badges

Comments

Mathlight · Accepted Answer · 2012-09-20 09:17:56Z

1

Here is an fiddle witch the right way:

http://jsfiddle.net/ToBadForU/9p7ud/

This is what you want, right?

answered Sep 20, 2012 at 9:17

Mathlight

6,73318 gold badges66 silver badges109 bronze badges

2 Comments

Charles Jourdan Over a year ago

I think he wants on every elements

Mathlight Over a year ago

@CharlesJourdan, you're right, but i didn't save it right... I've updated the link

Mr_Green · Accepted Answer · 2012-09-21 17:12:35Z

0

Instead of giving same id's you can declare the div's without any id's or class and give the code below. To know more about selectors go to this link.

$(document).ready(function() {
function randomNumber() {
    return Math.floor(Math.random() * 255)
}
$('div').mouseover(function() {
    $('div').css('background-color', 'rgb(' + randomNumber() + ',' + randomNumber() + ',' + randomNumber() + ')');
});
$('div').mouseout(function() {
    $('div').css('background-color', 'white');
  });
});

or else simply use class instead of id's. Because id's are unique but not classes.

edited Sep 21, 2012 at 17:12

answered Sep 20, 2012 at 9:13

Mr_Green

42k48 gold badges171 silver badges277 bronze badges

2 Comments

QQping Over a year ago

This would affect all other div's too so assigning classes would be the best choice.

Mr_Green Over a year ago

It can be achieved by using jquery selectors. I updated my answer :)

Collectives™ on Stack Overflow

how do you apply some script to every css element with the same id?

5 Answers 5

1 Comment

Comments

Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related