Select elements with id attribute that starts/ends with a particular value

Question

Can jQuery or JavaScript be used with a regex to select multiple elements with similar id?

I have the following paragraphs:

Answer 1

Here is the working JS FIDDLE

HTML:

<p id="item5_2"> A </p>
<p id="item9_5"> B </p>
<p id="item14_2"> C </p>
<input type="button" value="Get element ids starting with 'item' and ending with '2'" onclick="get_ids()">

JS:

get_ids = function(){
    $('[id^="item"][id$="2"]').each(function() {
        alert($(this).attr('id'));
    });
}

Answer 2

You can use "start with" and "ends with" selectors provided by jQuery, like below.

$("[id^='item'][id$='2']").html("D");

Official documentation:

• Start with selector
• Ends with selector

Answer 3

You can combine attribute selectors: fiddle

$("[id^='item'][id$='2']").html("D");

Answer 4

The best way to go is to use the following jQuery selectors

^= is starts with
$= is ends with

=  is exactly equal
!= is not equal
*= is contains

So in your case:

var $items = $('[id^="item"][id$="2"]');

Answer 5

You can use next code if you want to do any other action:

$('[id^="item"]').each(function(){
  if(this.id.slice(-1) == 2){
    //Do something
    $(this).html('D');
  }

});

Answer 6

Try this

 <p id="item5_2"> A </p>
 <p id="item9_5"> B </p>
 <p id="item14_2"> C </p>

and...

 $('[id^="item"][id$="2"]')