jQuery selector for id starts with specific text
Let me offer a more extensive answer considering things that you haven't mentioned as yet but will find useful.
For your current problem the answer is
$("div[id^='editDialog']");
The caret (^) 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 code above can be changed to any attribute that an element may have, such as href
, name
, id
or src
.
Solution 2
Use classes
// Matches all items that have the class 'classname'
$(".className");
// Matches all divs that have the class 'classname'
$("div.className");
Solution 3
List them (also noted in previous answers)
$("#id1,#id2,#id3");
Solution 4
For when you improve, regular expression (Never actually used these, solution one 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+/)});
Use jquery starts with attribute selector
$('[id^=editDialog]')
Alternative solution - 1 (highly recommended)
A cleaner solution is to add a common class to each of the divs & use
$('.commonClass')
.
But you can use the first one if html markup is not in your hands & cannot change it for some reason.
Alternative solution - 2 (not recommended if n is a large number
)
(as per @Mihai Stancu's suggestion)
$('#editDialog-0, #editDialog-1, #editDialog-2,...,#editDialog-n')
Note: If there are 2 or 3 selectors and if the list doesn't change, this is probably a viable solution but it is not extensible because we have to update the selectors when there is a new ID in town.
If all your divs start with editDialog as you stated, then you can use the following selector:
$("div[id^='editDialog']")
Or you could use a class selector instead if it's easier for you
<div id="editDialog-0" class="editDialog">...</div>
$(".editDialog")