How to Select All Elements Whose Id Starts and Ends with Specific Strings

How to select all elements whose ID starts and ends with specific strings?

The following CSS3 selector will do the job:

tr[id^="section_"][id$="_dummy"] {
height: 200px;
}

The ^ denotes what the id should begin with.

The $ denotes what the id should end with.


id itself can be replaced with another attribute, such as href, when applied to (for example) <a>:

a[href^="http://www.example.com/product_"][href$="/about"] {
background-color: red;
}

Find all div id's, which starts and ends with a specific string

yes there are attribute starts with selector and attribute ends with selector

The script would be like below.

$('div[id^="starting"][id$="ending"]')

below is a visual sample

$('div[id^="starting"][id$="ending"]').css('background-color','yellow');
div {  width: 100px;  height: 100px;  border: 2px solid black;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="startingending"></div> <!-- select this --><div id="starting789ending"></div> <!-- select this --><div id="starting789"></div> <div id="starting789ending"></div> <!-- select this --><div id="789ending"></div><div id="starting789ending"></div> <!-- select this -->

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

Yes it can, you can combine the attribute starts with and the attribute ends with selector

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

FIDDLE (and you have to enable jQuery in the fiddle)

you can't use regex to match the numbers in between though, for that you'd need filter()

$('[id^="item"]').filter(function() {
return this.id.match(/item\d+_2/);
}).html("D");

Find all elements whose id begins with a common string

Using jQuery you can use the attr starts with selector:

var dates = $('[id^="createdOnid"]');

Using modern browsers, you can use the CSS3 attribute value begins with selector along with querySelectorAll:

var dates = document.querySelectorAll('*[id^="createdOnID"]');

But for a fallback for old browsers (and without jQuery) you'll need:

var dateRE = /^createdOnid/;
var dates=[],els=document.getElementsByTagName('*');
for (var i=els.length;i--;) if (dateRE.test(els[i].id)) dates.push(els[i]);

jQuery selector for id starts with specific text

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.

jQuery selector help - how to find element whose ID starts and ends with specific characters

Well, you were almost there...
$('[id^=cc-][id$=1]')

DEMO:http://jsfiddle.net/pavloschris/nr3ad/

How to get CSS to select ID that begins with a string (not in Javascript)?

[id^=product]

^= indicates "starts with". Conversely, $= indicates "ends with".

The symbols are actually borrowed from Regex syntax, where ^ and $ mean "start of string" and "end of string" respectively.

See the specs for full information.

jQuery Selector: Id Ends With?

If you know the element type then: (eg: replace 'element' with 'div')

$("element[id$='txtTitle']")

If you don't know the element type:

$("[id$='txtTitle']")

More information available


// the old way, needs exact ID: document.getElementById("hi").value = "kk";$(function() {  $("[id$='txtTitle']").val("zz");});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><input id="ctl_blabla_txtTitle" type="text" />

ID Ends With in pure Javascript

Use querySelectorAll, not available in all browsers (like IE 5/6/7/8) though. It basically works like jQuery:

http://jsfiddle.net/BBaFa/2/

console.log(document.querySelectorAll("[id$=foo]"));

jQuery or CSS selector to select all IDs that start with some string

Normally you would select IDs using the ID selector #, but for more complex matches you can use the attribute-starts-with selector (as a jQuery selector, or as a CSS3 selector):

div[id^="player_"]

If you are able to modify that HTML, however, you should add a class to your player divs then target that class. You'll lose the additional specificity offered by ID selectors anyway, as attribute selectors share the same specificity as class selectors. Plus, just using a class makes things much simpler.



Related Topics



Leave a reply



Submit