Jquery selector for id starts with specific text

Question

I have this jQuery code:

$( "#editDialog" ).dialog({ autoOpen: false, show: { effect: "blind", duration: 1000 }, hide: { effect: "explode", duration: 1000 } }); 

But I have several divs with type identifier: editDialog-0, editDialog-1, ...., editDialog-n.

How can I create jQuery code for all of these divs like the one above?

Answer 1

Use jquery starts with attribute selector

 $('[id^=editDialog]') 

Alternative solution - 1 (recommended)

A cleaner solution is to add a common class to each section and use

$('.commonClass') .

But you can use the first if the html markup is not in your hands and cannot change it for any reason.

An alternative solution is 2 (not recommended if n is a large number ) (as suggested by @Mihai Stancu)

$('#editDialog-0, #editDialog-1, #editDialog-2,...,#editDialog-n')

Note. If there are 2 or 3 selectors, and if the list does not change, this is probably a viable solution, but it is not extensible, because we must update the selectors when there is a new identifier in the city.

Answer 2

Let me offer a broader answer, given what you have not mentioned yet, but find useful.

For your current problem, the answer

 $("div[id^='editDialog']"); 

The carriage (^) is taken from regular expressions and means starts with .

Solution 1

 // Select elems where 'attribute' ends with 'Dialog' $("[attribute$='Dialog']"); // Selects all divs where attribute is NOT equal to value $("div[attribute!='value']"); // Select all elements that have an attribute whose value is like $("[attribute*='value']"); // Select all elements that have an attribute whose value has the word foobar $("[attribute~='foobar']"); // Select all elements that have an attribute whose value starts with 'foo' and ends // with 'bar' $("[attribute^='foo'][attribute$='bar']"); 

attribute in the above code can be changed to any attribute that this element can have, for example href , name , id or src .

Decision 2

Use classes

 // Matches all items that have the class 'classname' $(".className"); // Matches all divs that have the class 'classname' $("div.className"); 

Decision 3

List them (also noted in previous answers)

 $("#id1,#id2,#id3"); 

Decision 4

If you improve regex (never been used, one's solution has always been sufficient, but you never know!

 // Matches all elements whose id takes the form editDialog-{one_or_more_integers} $('div').filter(function () {this.id.match(/editDialog\-\d+/)}); 

Answer 3

Add a generic class to all divs. For example, add foo to all divs.

 $('.foo').each(function () { $(this).dialog({ autoOpen: false, show: { effect: "blind", duration: 1000 }, hide: { effect: "explode", duration: 1000 } }); }); 

Answer 4

If all your divs start with editDialog, as you stated, you can use the following selector:

 $("div[id^='editDialog']") 

Or you could use a class selector if you find it easier

 <div id="editDialog-0" class="editDialog">...</div> $(".editDialog")