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 div
s 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
CSS - Style a Link Based on Its "Rel" Attribute
How to Match 3D Perspective of Real Photo and Object in CSS3 3D Transforms
How to Make an Inset Drop Shadow in Svg
Transform-Origin for CSS Animation on Svg Working in Chrome, Not Ff
CSS Grid - Unnecessary Word Break
Failed to Decode Downloaded Font, Ots Parsing Error: Invalid Version Tag + Rails 4
Horizontally Scrollable List of Cards in Bootstrap
Webkit Animation Is Leaving Junk Pixels Behind on the Screen
What's the Difference Between Visibility: Hidden and Visibility: Collapse in Flexbox
CSS Grid Auto Fit with Max-Content
Stopping a CSS Animation But Letting Its Current Iteration Finish
CSS Focus Not Working in Safari and Chrome
Media Queries - Mobile VS Desktop Browser
How to Target a Specific Group of Siblings in a Flat Hierarchy
Issues with "Background-Position" in "Background" Shorthand Property