Home  >  jQuery

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>
 
We have three anchor tag element with id ab, ab-cd, abcd. If we select prefix ab then two elements can be selected.
$('a[id|="ab"]').css('border','3px dotted red');
 
So we can use Prefix Selector as above to change CSS properties.
<!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
FIND MORE TUTORILAS






©2019 concretepage.com | Privacy Policy | Contact Us