jquery combining links id's

Question

This is my current code in order for each of my

 $('#fbNameS1').tipsy({fade: true});
 $('#fbNameS2').tipsy({fade: true});
 ...
 $('#fbNameS207').tipsy({fade: true});
 $('#fbNameS208').tipsy({fade: true});

Now i've seen some jQuery code where they combined DIV ID's together. Before i go and do that to all 209 tipsy's i would like a comfirmation that this would work for the tipsy tooltips?

 $('#fbNameS1','#fbNameS2',....,'#fbNameS207','#fbNameS208').tipsy({fade: true});

Hiya why not use `class="class_name"` attribute, that way you do not have to write all that just do: `$(".class_name").tipsy({fade: true});` nice and easy :) avoiding pain of 209 element id since Jquery was born :P hope this help! — Tats_innit, May 20 '12 at 08:34
@Tats_innit: The way tipsy seems to be set up is that for each DIV you want a tool tip on, you have to set it up like i showed in the first code in the OP. Having 209 DIVS with the same name "#fbNamesS" caused the first DIV to have a tooltip while all others did not. Or was it that the first had the tooltip and when you rolled over the others the tooltip would show up still on the first DIV. Ether way, it didnt work with just one :o) — StealthRT, May 20 '12 at 08:44

score 4 · Accepted Answer · answered May 20 '12 at 08:39

4

You can try this:

$('div[id^=fbName]').tipsy({fade: true})

answered May 20 '12 at 08:39

Salman

3,761
2
23
34

Forgive me for asking but what does that tell jQuery? How does it know what # its on? – StealthRT May 20 '12 at 08:45
It is just a CSS selector. You can learn more here- http://api.jquery.com/category/selectors/ – Salman May 20 '12 at 08:47
Ah, ok. But would it not need to be **$('div[id^=fbNameS]').tipsy({fade: true})**? – StealthRT May 20 '12 at 08:54
I would suggest adding a class to all of those div tags and using the simpler syntax `$('div.classname').tipsy...` – JohnFx May 20 '12 at 08:56
@Salman: Just tried it-did not work. No tooltips on any DIV now. – StealthRT May 20 '12 at 08:57
@JohnFx: The class name for each of those DIV's is **fancyboxMod** – StealthRT May 20 '12 at 08:59
You can have more than one class for an element. For example: `
` Or you could just use the fancyBoxMod class in your selector if you want everything with that class affected. – JohnFx May 20 '12 at 09:00
1

@StealthRT I think I understand your issue. tipsy plugin will work on the anchor () elements inside the div which you initialize with tipsy. I need to look at your HTML code before providing a solution. – Salman May 20 '12 at 09:02
1

Yeah. Just noticed it was a link that was used for the tipsy. I changed the div[ to the a[ and both examples from you and @JohnFx worked! – StealthRT May 20 '12 at 09:06

score 1 · Answer 2 · answered May 20 '12 at 08:58

This is a much cleaner way than referencing all those DIVs by ID

First, add a class to each DIV you want to do mass operations on.

<div id='fbNameS1' class='fancyboxMod doTipsyThing' />
<div id='fbNameS2' class='fancyboxMod doTipsyThing' />
<div id='fbNameS3' class='fancyboxMod doTipsyThing' />

Then you can tweak them all with a short selector like this:

$('div.doTipsyThing').tipsy({fade: true});

This is a much more maintainable way to accomplish what you are trying to do.

UPDATE:
I updated my example to show how you would do this if you need to have another class on these elements since you said they required fancyboxMod on them.

**$('a.fancyboxMod').tipsy({fade: true});** and also **$('a[id^=fbNameS]').tipsy({fade: true})** worked! Thanks! — StealthRT, May 20 '12 at 09:07

jquery combining links id's

2 Answers2