Selecting Links based on the Target URL's Extension Using jQuery
Sometimes, we will require selecting all the links in a page or DIV that links to a particular extension.
For example, if we want to select all hyperlinks that link to a PDF file extension to style it differently from other links we can use the following jQuery script.
<script src="_scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script language="javascript">
$(document).ready(function() {
$("#dvContent A[href$=pdf]").css("color", "Red");
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="dvContent">
//Contents
</div>
</form>
</body>
</html>
The selector expression in above code uses "$" sign at the end of href property indicates to select all the hyperlinks(<A> tag) with href property value ending with "pdf" string. When the above code is executed, it will make all the links inside the DIV "dvContent" with pdf extension to Red.
Happy Coding!!!
|