jQuery selector for id starts with specific text

Question

I have this jQuery code      quot  editDialog quot    dialog     autoOpen  false    show        effect   quot blind quot       duration  1000        hide        effect   quot explode quot       duration  1000          But I have several divs with id s like this  editDialog-0  editDialog-1        editDialog-n  How can I make a jQuery code for all of these divs  like the one above

User · Answer

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+/)});

User · Answer

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  amp  use       commonClass      But you can use the first one if html markup is not in your hands  amp  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

User · Answer

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   lt div id  editDialog-0  class  editDialog  gt     lt  div gt       editDialog

User · Answer

Add a common class to all the div  For example add foo to all the divs       foo   each function           this  dialog       autoOpen  false      show          effect   blind         duration  1000            hide          effect   explode         duration  1000

[javascript] jQuery selector for id starts with specific text

Examples related to javascript

Examples related to jquery