Skip to content Skip to tags Skip to twitter news Skip to blog roll Skip to categories Skip to archives Skip to recent posts

November 25, 2007

1 Comment

jQuery: Select what you want – part 1

by in jQuery,Web Development on November 25, 2007 @ 11:12 pm

Table of contents for Select anything

  1. jQuery: Select what you want – part 1
  2. jQuery: Select what you want – part 2

In an earlier post I wrote about what are the fastest basic selectors and found out some interesting stuff with regards to speed for some basic selectors. In this post I am going to go over some not-so-basic selectors. I am going to try not to repeat what Karl has said in his two posts, “How to Get Anything You Want – part 1” and “How to Get Anything You Want – part 2“, but some may be worth repeating.

To keep my searches confined to a certain div with a class of “theDiv” using calls like:

  1. $("SELECTOR", ".theDiv")

Basically what this does is searches for the element with the class of “theDiv” and then searches for “SELECTOR” within that result.

Cell 1 Cell 2 Cell 3 Cell 4 Cell 6

See the quick brown fox jump over the lazy dog.

  • This is 1
  • This is 2
  • 3 this is
  • This is 4
  • This is 5





I am set as display:none
I am set as visibility:hidden

We are are going to start off with some “Attribute Filters”

$(“[name]“) Gets each element with an attribute of “name”. Note that the last text field did not get highlighted, although it does have an attribute “name” , it is empty, so therefore not selected.

$(“input[name]“) Is the same as above, except we are limiting the return to inputs and if you run each with firebug running on “Profile,” this one takes more calls to find the correct element(s).

$(“[name=getMe]“) This one is only grabbing the elements that have the “name” attribute with a value of “getMe”

$(“[name!=getMe]“) This one is only grabbing the elements that don’t have the “name” attribute with a value of “getMe” and as you can see it even grabbed the elements that did not have the “name” attribute at all.

$(“[type^=b]“) This one matches elements that have the “type” attribute and the value of the “type” attribute starts with a “b”. (in my test area the one submit button has a type of button)

$(“[type$=t]“) This one gets all the elements that has the “type” attribute and it’s value ends with “t.”

$(“[value*=no]“) This one will match all elements with “no” in it.

$(“[id*=no]“) Same as “Test 7″ except we are grabbing all elements with “no” in the ID

$(“[id*=no][name=getMe]“)

Wow, that was fun, what did we learn? You can select anything you want by attribute alone. Let’s get into some “Content Filters”

$(“:contains(‘Cell’)”) Here we are getting all element with the word “Cell” in it and since we did not filter out what element we wanted, the TABLE, TBODY, TR, and the TD all got selected because they all contained the word “Cell”. Note my earlier comment that I am using $(":contains(‘Cell’)", ".theDiv") in my javascript to limit the return results to the containing div, otherwise the BODY and HTML tag and the other elements between BODY and the items with the "Cell" text.

$(“td:contains(‘Cell’)”) Here is the same approach but we will be restricting our search to just the TD.

$(“:empty”) Selects every element that is empty. If you don’t limit your search to items that are not form elements, you will get the input fields.

$(“:has(span)”) Selects all elements that has a span in it

$(“:parent”) Selects all elements that are “parent” elements

Oh; you want to be able to get hidden elements? Visible elements?

$(“:hidden”) Selects all elements that are hidden, this includes items with a style of display:none or visibility:hidden and input elements with a type of "hidden."

$(“:visible”) Selects all elements that are visible.

Where do we go from here

If you have visited the jQuery Documentation on Selectors you will see that I have not gone over anything new, just maybe rephrased it in “my terms.” These, for the most part, are the selectors I would use on a daily basis, so I felt that these were the best place to start. Some approaches my be faster, so I would suggest that you take some “me” time and see which ones will work the best in your situation.

In a future alticle, I am going to cover some of the approaches I take with a web base training framework that I think will benifit you

back to beginning of this post back to skip to links

If you liked this article why don't you share it:

Stumble it delicious Digg it Reddit it DZone it Bump it Mixx it! Buzz up! E-mail

One Response to “jQuery: Select what you want – part 1”

Trackbacks

  1. jQuery: Select what you want - part 2 | The Book and the Cover

Learn from my mistakes, I got burnt by the flame, you don't have to.


RSS Feed Link My Hosting of Choice

75 queries. 0.379 seconds. Powered by WordPress visitor stats