jQuery selector is different for each page

Question

I have built a script that triggers a click event on click of another element. For example, user may click element A and the script triggers a click on element B.

My issue is, that the selectors I use are specific for only one page as they contain a unique ID at the end of them, for example, on one page I may have selector-123 and on another page it may be selector-456.

Here is the actual selector

$('#accordion-section-sidebar-widgets-obox-layers-builder-4 > h3:nth-child(1)').trigger('click');

the issue is that #accordion-section-sidebar-widgets-obox-layers-builder-4 will not alway end in 4, but could end in any number.

Is there a way to use variables as my selector, something like #accordion-section-sidebar-widgets-obox-layers-builder-*

you could try something like explained here https://api.jquery.com/attribute-starts-with-selector/ — Captain0, Mar 27 '16 at 19:56
Are you looking for a selector that will match the beginning of the ID or do you know the numeric ID for the page and you want to build the selector using that id? — rdubya, Mar 27 '16 at 19:57
http://stackoverflow.com/questions/4161869/jquery-how-to-select-all-the-class-elements-start-with-text — pratiklodha, Mar 27 '16 at 19:57
@rdubya yes something that will match the start - only the number at the end changes so something like #accordion-section-sidebar-widgets-obox-layers-builder-* > h3:nth-child(1) — Sam Skirrow, Mar 27 '16 at 19:58

score 2 · Accepted Answer · answered Mar 27 '16 at 20:06

2

Assuming this is your html

<div id="accordion-section-sidebar-widgets-obox-layers-builder-4">
   hallo
</div>
<div id="accordion-section-sidebar-widgets-obox-layers-builder-6">
  bye
</div>

Using this

$('div[id^='accordion-section-sidebar-widgets-obox-layers-builder']').innerHml()

Will return

hallo
bye

Link to fiddle

I have left out the last part of the selector. This should get you started though.

answered Mar 27 '16 at 20:06

Captain0

2,583
2
28
44

Just read through the page you posted on my comments - that's exactly what I need - thanks – Sam Skirrow Mar 27 '16 at 20:06

score 0 · Answer 2 · answered Mar 27 '16 at 19:59

0

You can use regexp

$("[id^=accordion-section-sidebar-widgets-obox-layers-builder-][id$= > h3:nth-child(1)]")

answered Mar 27 '16 at 19:59

pratiklodha

1,095
12
20

score 0 · Answer 3 · answered Mar 27 '16 at 20:01

0

You could use jQuery's attribute contains prefix selector on id.

Docs

answered Mar 27 '16 at 20:01

mungurs

59
4

score 0 · Answer 4 · answered Mar 27 '16 at 20:05

0

you can use contains selector http://www.w3schools.com/cssref/sel_attr_contain.asp

answered Mar 27 '16 at 20:05

ikryvorotenko

1,393
2
16
27

jQuery selector is different for each page

4 Answers4