Allow javascript to work on div with any number appended to it

Question

I have a small bit of jquery that applies the jquery-ui accordian to an array of divs.

The divs are generated dynamically and each one needs to have a unique ID. I have successfully generated unique IDs for divs with each one having a different number at the end. Now I would like the jquery to be flexible enough to handle any of the divs no matter what number is at the end. All the divs have IDs with the naming convention "activity-accordion123" or "activity-accordian+number"

Here is the code I am using currently for the divs that have already been generated:

$(function() {
    $( "#activity-accordion408,#activity-accordion410,#activity-accordion415,#activity-accordion428,#activity-accordion439,#activity-accordion427" ).accordion({
      collapsible: true,
heightStyle: "content",
active: false,
header: "h3",
navigation: true
    }); 
  });

I would like to change this javascript so that it will work with any div that has the ID of "activity-accordion+any number". Is this possible?

This post probably answers it best: http://stackoverflow.com/questions/5376431/wildcards-in-jquery-selectors — Code Whisperer, Jul 19 '13 at 13:13
Can you also add a class which is the same for all divs? You could then select multiple divs. — Zlatko, Jul 19 '13 at 13:13

score 1 · Answer 1 · answered Jul 19 '13 at 13:13

1

Use this css selector: *=

$(function() {
    $( "[id*='activity-accordion']" ).accordion({
         collapsible: true,
         heightStyle: "content",
         active: false,
         header: "h3",
         navigation: true
    }); 
});

answered Jul 19 '13 at 13:13

Mohammad Areeb Siddiqui

9,795
14
71
113

'*=' means contains not start with – A. Wolff Jul 19 '13 at 13:14
@zladuric that doesn't matter; it's jQuery so it'll work wherever the library works. – Pointy Jul 19 '13 at 13:14
@roasted see this question's accepted answer: http://stackoverflow.com/questions/12155833/css-selector-id-contains-part-of-text – Mohammad Areeb Siddiqui Jul 19 '13 at 13:15
@MohammadAreebSiddiqui your answer would work too but i was thinking OP wants ID starting with some string, not containing some string – A. Wolff Jul 19 '13 at 13:16
No, using your selector you will match element with ID `something-activity-accordion` too – A. Wolff Jul 19 '13 at 13:20

score 1 · Answer 2 · answered Jul 19 '13 at 13:13

1

you could select them like this:

$("div[id^='activity-accordion'"])

Selects all div, that starts with activity-accordion

answered Jul 19 '13 at 13:13

reyaner

2,799
1
12
17

A. Wolff · Accepted Answer · 2013-07-19T13:20:43.523

0

Use ID attribute selector wildcard 'start with' like that:

$('div[id^="activity-accordion"]').accordion({
    collapsible: true,
    heightStyle: "content",
    active: false,
    header: "h3",
    navigation: true
});

edited Jul 19 '13 at 13:20

answered Jul 19 '13 at 13:13

A. Wolff

74,033
9
94
155

score 0 · Answer 4 · answered Jul 19 '13 at 13:13

0

Is there any reason that you can not simply have each div possess an "activity-accordion" class? Classes are useful to style/manipulate multiple similar elements. You can then use $('.activity-accordion') to select all such elements.

answered Jul 19 '13 at 13:13

stackptr

167
1
2
10

Yes I thought of that but the jquery-ui accordion, if to be repeated on one page, needs to be applied to divs with unique IDs/Classes. As far as I could understand. – Ciaran Gaffey Jul 19 '13 at 13:16

score 0 · Answer 5 · answered Jul 19 '13 at 13:15

use a class would be more didactic and correct to do

$(function() {
    $( ".accordions" ).accordion({
      collapsible: true,
heightStyle: "content",
active: false,
header: "h3",
navigation: true
    }); 
  });

score 0 · Answer 6 · answered Jul 19 '13 at 13:15

0

To match all <div>s, with an id of the pattern activity-accordion<number>, you can use:

$('div').filter(function() {
    return /activity\-accordion\d+/.test(this.id);
}).accordion({
    ...
});

answered Jul 19 '13 at 13:15

techfoobar

65,616
14
114
135

Allow javascript to work on div with any number appended to it

6 Answers6