In this post of JQuery, I will show how to select elements using their attributes.
Below is the complete html code that will be used as an example
1 <html>
2 <head>
3 <a href="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js</a>
4 </head>
5 <body>
6
7 function selectElement() {
8 var $element = $('a[href]');
9 $('#input1').val($element.length);
10
11 $element = $('a[href="http://www.google.com"]');
12 $('#input2').val($element.length);
13
14 $element = $('a[href^="http"]');
15 $('#input3').val($element.length);
16
17 $element = $('a[href$=".net"]');
18 $('#input4').val($element.length);
19
20 $element = $('a[href!="http://www.rediff.com"]');
21 $('#input5').val($element.length);
22
23 $element = $('a[href*="www"]');
24 $('#input6').val($element.length);
25
26 $element = $('a[href|="abc"]');
27 $('#input7').val($element.length);
28
29 $element = $('a[href~="abc"]');
30 $('#input8').val($element.length);
31
32 $element = $('a[href="abc"][id="nohttp2"]');
33 $('#input9').val($element.length);
34 }
35
36 <input id="Button" name="Button" type="button" value="Button" onclick="selectElement();"/>
37 <br>
38 <br>
39 <a id="google" href="http://www.google.com">Google</a><br>
40 <a id="yahoo" href="http://www.yahoo.com">Yahoo</a><br>
41 <a id="rediff" href="http://www.rediff.com">Rediff</a><br>
42 <a id="msn" href="http://www.msn.com">MSN</a><br>
43 <a id="nolink">no link</a><br>
44 <a id="nohttp1" href="abc.net">abc.net</a><br>
45 <a id="nohttp2" href="abc-">abc-</a><br>
46 <a id="nohttp2" href="abc">abc</a>
47 <br>
48 <br>
49 Anchors with href value: <input id="input1" type="text" disabled/>
50 <br>
51 Anchors with href value equal to 'http://www.google.com': <input id="input2" type="text" disabled/>
52 <br>
53 Anchors whose href value starts with 'http': <input id="input3" type="text" disabled/>
54 <br>
55 Anchors whose href value ends with '.net': <input id ="input4" type="text" disabled/>
56 <br>
57 Anchors whose href value not equal to 'http://www.rediff.com': <input id ="input5" type="text" disabled/>
58 <br>
59 Anchors which href value contains 'www': <input id="input6" type="text" disabled/>
60 <br>
61 Anchors whose href value equal to 'abc' or 'abc-': <input id="input7" type="text" disabled/>
62 <br>
63 Anchors whose href value is equal to 'abc' or contains 'abc abc': <input id="input8" type="text" disabled/>
64 <br>
65 Anchors with href value equal to 'abc' and id equal to 'nohttp2': <input id="input9" type="text" disabled/>
66 </body>
67 </html>
In the above example, I used 9 approaches to select elements using their attributes.
First approach, refering to line 8, we select anchor elements which has href attribute.
In the Second approach, refering to line 11, we select anchor elements having href attribute and the value of href attribute should be equal to “http://www.google.com”.
In the third approach, refering to line 14, we select anchor elements having href attribute whose value starts with “http”.
In the fourth approach, refering to line 17, we select anchor elements having href attribute whose value ends with “.net”.
In the fifth approach, refering to line 20, we select anchor elements having href attribute whose value is not equal to “http://www.rediff.com”.
In the sixth approach, refering to line 23, we select anchor elements having href attribute whose value contains the string “www”.
In the seventh approach, refering to line 26, we select anchor elements having href attribute whose value equal to “abc” or “abc-”
In the eigth approach, refering to line 29, we select anchor elements having href attribute whose value is equal to “abc” or contains “abc” delimited by spaces.
In the ninth and final approach, refering to line 32, we select anchor elements having href attribute whose value is equal to “abc” and also having
another id attribute whose value equal to “nohttp2”. The final approach allows us to combine multiple criterias with and condition.
All these approaches return a JQuery collection, the length of which is printed in the textbox.
Check these products on Amazon
