Click here to Skip to main content
Click here to Skip to main content

Tagged as

Go to top

jQuery – How to Select Nodes by Attribute Value?

, 17 Dec 2013
Rate this:
Please Sign up or sign in to vote.
jQuery - how to select nodes by attribute value

In this article, we will go over Selecting Nodes by Attribute Value in jQuery.

In the previous articles, we have discussed about how to select elements by Tag Name, by ID and by Class Name. But there may be a time when it is not enough to find elements by these three. You may want to check specific attribute for a value and find elements based upon that value.

How to Select Elements by Attribute Value?

  • Use brackets [attribute] to select based on attribute name and/or attribute value.
  • Example: $(‘a[title]‘).
  • The above selector will select all <a> elements that have a title attribute.
  • $(‘a[title="Customer Info"]‘) will select all anchor elements that have a “Customer Info” title attribute.

Let's do an example of this. I want to find out all the divs where there is a title attribute. Let’s find out the count of them in an alert box. Right now, I have only one div with a title in the web page. I can use $(‘div[title]‘) to find all the divs which have a title.

jQuery.1

Go ahead and run it and we will get 1 in the alert box.

jQuery.2

Now let’s try to find a specific one. We want to find a div where title equals Div Title. At first look, you may think why should we do like this. Because the div has an Id and we can select it by Id which is the fastest way. But in an actual web page, there may be many divs having the same title. We want to find all those divs. Then put them in a divs collection. Wrap it inside an alert to find their count.

jQuery.3

While running the application, we will get 1 as output, which is true as well as we have only one div with title Div Title.

jQuery.4

Now let’s change the title from Div Title to div Title inside the Selector. That is, change the case of one letter.

jQuery.5

Go ahead and run it and we can see the output as 0. What did you understand from this? Selecting Nodes by Attribute value is case sensitive.

jQuery.6

Then let’s try to find the input tags. I want to find input tags whose type is text. You can use $(‘input [type="text"]‘) for this purpose. Wrap it up inside an alert to find its length.

jQuery.7

While scrolling down our web page, at the bottom of the form, we can see 2 input tags whose type is text.

jQuery.8

Go ahead and run the application and we will get 2 as output as expected.

jQuery.9

Now let’s change the background color of input tags whose type is text to yellow.

jQuery.10

While running the application, we can see the background color of both the two text boxes are changed to yellow.

jQuery.11

From the above example, you can see how easy it is to select elements by attribute value using jQuery.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Arun Ramachandran India
Software Developer
India India
Arun Ramachandran is a Software Engineer having hands on experience in different Microsoft Technologies who is presently working in Experion Technologies, India. He has written over 95 articles on the subject on his blog at http://BestTEchnologyBlog.com. Along with 3 years of hands on experience he holds a Master of Computer Applications degree from Cochin University of Science & Technology (CUSAT).

Comments and Discussions

 
GeneralMy vote of 5 PinmemberDrewCopenhaver19-Dec-13 8:39 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140922.1 | Last Updated 18 Dec 2013
Article Copyright 2013 by Arun Ramachandran India
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid