jQuery AttributePrefix Selector
February 25, 2013
In jQuery, let's learn how to use prefix selector. In the entire DOM element which has attribute value same or they starts with same value, then we can change the CSS properties in one go for those entire element. Let's understand.
<a href="javascript:void" id="ab">AB</a> <a href="javascript:void" id="ab-cd">AB-CD</a> <a href="javascript:void" id="abcd">ABCD</a>
$('a[id|="ab"]').css('border','3px dotted red');
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<a href="javascript:void" id="ab">AB</a>
<a href="javascript:void" id="ab-cd">AB-CD</a>
<a href="javascript:void" id="abcd">ABCD</a>
<script>
$('a[id|="ab"]').css('border','3px dotted red');
</script>
</body>
</html>
Output
AB AB-CD ABCD
