jQuery allows for an extraordinary amount of flexibility for selecting elements according to their attributes. First, and most obvious, is selecting an attribute that matches an exact string pattern:
$(“[attributeName=’string2match’]”)
or
$(“[attributeName=’string2match’]”)
But, there are also attribute selectors reminiscent of regexes, so you can match using part of a string as well; for example, the attribute starts and ends selectors. The attribute starts selector selects all elements that begin with a specified string. Likewise, the attribute ends selector selects all those elements that end with a particular string:
$(“[attributeName^=’value’]”); // attribute starts
$(“[attributeName $=’value’]”); // attribute ends
Let’s say that you have several input elements with IDs that begin with the string “user”: The following code sample illustrates using a regular expression to select all elements that have IDs that include the string “user” at the beginning of the ID.
<!DOCTYPE html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-1.7.1.js”>
</script>
<script>
var userInfo = $(“[id^=’user’]”).length;
console.log(n);
</script>
</head>
<body>
<form>
<input id=”userName” type=”text” />
<input id=”userId” type=”text” />
<input id=”userPhone” type=”text” />
</form>
</body>
</html>
Code snippet is from attribute-starts-selector.txt
In contrast to the attribute selectors that match, you also have attribute selectors that don’t match. The following example shows an example of a selector that does matches against IDs that do not equal “cheese.”
<!DOCTYPE html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-1.7.1.js”>
</script>
<script>
var userInfo = $(“[id!=’cheese’]”).length;
console.logconsole.log(n);
</script>
</head>
<body>
<div id=”eggs”></div>
<div id=”ham”></div>
<div id=”cheese”></div>
</body>
</html>
Code snippet is from negative-selector.txt
You can also select by a string that exists anywhere in the attribute value, using
$(“[attributeName*=’value’]”);
So, for example, say you have a document with a set of divs, each with an ID attribute, and you’d like to get the subset of divs that contain the string ‘zombie’, which may appear at the beginning or end of the ID value. The following code illustrates selecting any ID that contains “zombie” anywhere in the ID attribute value:
<!DOCTYPE html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-1.7.1.js”> </script>
<script>
var userInfo = $(“[id*=’zombie’]”).length;
console.log(n);
</script>
</head>
<body>
<div id=”greenzombie”></div>
<div id=”zombieman”></div>
<div id=”madscientist”></div>
</body>
</html>
Code snippet is from anywhere-selector.txt
As you can see you can select elements with exact matches on the attribute values, matches on the beginning and end of the attribute value, matching by a string an attribute value doesn’t contain, and a string appearing anywhere in the attribute value. Is there more? Yep. There’s also the attribute contains word selector, where each word is space delimited. This small snippet shows the syntax for using an attribute contains selector.
$(“[attributeName~=’value’]”);
This is useful for extracting words from an input box (among many other uses I haven’t considered). For example the following code searches through the DOM for elements with an ID that contains the word “zombie.”
<!DOCTYPE html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-1.7.1.js”>
</script>
<script>
var userInfo = $(“[id~=lzombiel]”).length;
console.log(n);
</script>
</head>
<body>
<div id=”greenzombie”></div>
<div id=”zombie man”></div>
<div id=”mad scientist”></div>
</body>
</html>
Code snippet is from attribute-contains.txt
And just like the basic selectors, you use multiple attribute selectors as well for more complicated situations. The next example has four forms: two containing form data for admin users and two containing form data for regular users. All four contain three text inputs, userName, employeeld, and age. All of the form names follow the convention userType/User/OfficeNumber. To get the desired form, adminUserOfficel, a multiple attribute selector is used, $(“form[name$=’Office1′] form[name^=admin]”), which can also be written as $(“[name$=’Office1′][name^=admin]”). You can also use a single matching string, like $(“[name=’adminUserOffice1′]”). This example is here for demonstration purposes.
<!DOCTYPE html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-1.7.1.js”> </script>
<script>
$(function(){
var n = $(“form[name$=’Office1′]form[nameA=admin]”).length;
console.log(n);
});
</script>
</head>
<body>
<form name=”adminUserOffice1″ method=”post” action=”sendUserData.php”>
<input type=”text” id=”userName”></input>
<input type=”text” id=”employeeId”></input>
<input type=”text” id=”age”></input>
</form>
form name=”adminUserOffice2″ method=”post” action=”sendUserData.php”>
<input type=”text” id=”userName”></input>
<input type=”text” id=”employeeId”></input>
<input type=”text” id=”age”></input>
</form>
<form name=”regularUserOffice1″ method=”post” action=”sendUserData.php”>
<input type=”text” id=”userName”></input>
<input type=”text” id=”employeeId”></input>
<input type=”text” id=”age”></input>
</form>
<form name=”regularUserOffice2″ method=”post” action=”sendUserData.php”>
<input type=”text” id=”userName”></input>
<input type=”text” id=”employeeId”></input>
<input type=”text” id=”age”></input>
</form>
</body>
</html>
Code snippet is from multiple-attribute-selectors.txt
Table 4-2 summarizes the different kinds of attribute selectors.
Source: Otero Cesar, Rob Larsen (2012), Professional jQuery, John Wiley & Sons, Inc