How to select multiple elements with jQuery

Question

I'm new to JQuery/Javascript etc... based on the following article: How to make an anchor tag refer to nothing?

I would like to apply the java function to several id's. Can we not make the function execute for classes as opposed to ids?

<span class="style1" id="myid">Link</span> 
<span class="style1" id="myid">Link</span>
<span class="style1" id="myid">Link</span>
<span class="style1" id="myid">Link</span>
<span class="style1" id="myid">Link</span>

$('myid').click(function() { 
    /* put your code here */ 
});

Basically as above, how do I execute the function above for ALL of the links? Is this possible? Thanks in advance.

`id`s must be unique within a document, you cannot have elements with the same `id` — jmoerdyk, Mar 28 '12 at 17:39
Thanks for clarifying, I am now using classes instead. When I said "link" - I was referring to the span class, (as reference from the other article)... — RiceBucket, Mar 29 '12 at 09:29

score 32 · Answer 1 · answered Mar 28 '12 at 17:41

32

you should name the IDs uniquely,

<span class="style1" id="myid1">Link</span> 
<span class="style1" id="myid2">Link</span>
<span class="style1" id="myid3">Link</span>
<span class="style1" id="myid4">Link</span>
<span class="style1" id="myid5">Link</span>

then use this code

$('#myid1,#myid2,#myid3,#myid4,#myid5').click(function() { 
    /* put your code here */ 
});

answered Mar 28 '12 at 17:41

Sujit Agarwal

12,348
11
48
79

3

I suggest `$(".style1").click(function () {//whatever});` – Lucas Jul 31 '12 at 10:05
3

+1 this answers the original question, but in this case one single class selector would have done the job. – GoodSp33d Jun 10 '13 at 12:47
this is what i needed because i have different radio buttons i needed to behave this way. thanks! – Alejo_Blue Jun 12 '18 at 17:34

score 16 · Accepted Answer · edited Mar 28 '12 at 17:40

16

Use the following

$('.style1').click(function() {      
    /* put your code here */  
});

This adds a click handler to all elements with class containing style1. You should not have duplicate IDs

edited Mar 28 '12 at 17:40

Ruan Mendes

90,375
31
153
217

answered Mar 28 '12 at 17:37

Scorpion-Prince

3,574
3
18
24

score 3 · Answer 3 · answered Mar 28 '12 at 17:38

First off, IDs should be unique. You should not have multiple elements with the same ID.

To select by ID in jQuery use the # character. $('#myid'). This will get the first element with that ID, as there should only be one (you can kinda cheat by doing $('[id="myid"]') to get get multiple elements with the same ID).

I suggest using a class to select all of your links. Classes are selected using the . character.

$('.style1').click(function(){});

How to select multiple elements with jQuery

3 Answers3

Linked