How to Get Anything You Want – part 1
read 49 commentsWith jQuery, you can get to just about anything on a web page. In this entry, I’ll show you a few ways you can use jQuery’s versatile selector expressions to traverse to an element — or group of elements — in the DOM.
I’ve put together a short paragraph and an ordered list scattered with inline elements such as <em>, <code>, and links. It’s all wrapped in a DIV with an ID of “jqdt,” which allows me to focus the demonstration to one area of this page.
Each button below the “jqdt” DIV will toggle a yellow background on and off for the parts of the DIV described.
This is a paragraph of text with class=”goofy.” It has an external link, some $(code), and a same-page link.
-
$('li:eq(0)')gets the first list item -
$('li:even')gets all odd-numbered list items (because, in javascript, numbering starts with 0, not 1). -
$('li:lt(3)')gets the first 3 list items. “lt” stands for “less than,” and it starts counting at 0, not 1. -
$('li:not(.goofy)')gets list items 1, 2, and 4, because they’re not “goofy.” -
$('p a[href*=#]')gets any links that are inside a paragraph and have an “href” attributestarting with “#” —containing “#” anywhere.in other words, same-page links. There are problems with trying to identify same-page links this way. I’ll write about this in an upcoming entry. Note the space between the “p” and the “a”; that means that the “a” is a descendant of the “p.” -
$('code, li.goofy')gets all code elements and any list item with a class of “goofy.” -
$('ol .goofy > strong')gets all strong elements that are children of any element with a class of “goofy” as long as the class somewhere inside (i.e. a descendent) of an ordered list. Notice that the word “item” is not highlighted because, even though it’s inside “.goofy,” it’s not a direct child. Only “goofy” is a direct child of “.goofy.” Maybe we should call it “goofy jr.” -
$('li + li > a[href$=pdf]')gets all links ending in “pdf” that are children of any list item that has another list item as its previous sibling. It won’t get the first list item’s silly.pdf because that list item has no other list items before it. -
$('span:hidden')gets any span element that is hidden.
Note: The selectors used for the toggle buttons are identical to the ones shown next to each button, except that they are preceded by $('#jqdt').find to target the highlighting.
jQuery’s selector expressions cover the full range of CSS 1-3, along with basic XPath and a few jQuery-only expressions. For a complete list, visit jquery.com
Next time, I’ll explore jQuery functions such as .filter(), prev(), and siblings() that complement the above selector expressions to give you full DOM-traversing power!
Nice concise example that should be very handle for people new to jQuery’s syntax.
Excellent examples. Good for learning, and good for “pwoer of jQuery” -show-offs too.
Also a good way to learn advanced CSS selectors!
Hey, thanks a lot for the compliments.
Chris, won’t it be nice to actually be able to use those advanced CSS selectors in our stylesheets, now the IE7 is out the door? :) Can’t wait until a large enough percentage of users have migrated from IE6 to put some of those nifty CSS rules to work without having to worry about IE ruining the fun. :)
It would be lovely, Karl, but it’s never going to happen. I fear we are stuck with IE6 forever. Only 23% of web users are running XP SP2, the only platform on which IE7 may be installed. Even when Vista (where IE7 is native) goes live, it’s unlikely to move IE7 use above legacy systems running IE6 in the forseeable future. The best we can hope for is a continued stream of one-way conversions to Firefox.
I think you misunderstood the stats. Yes 23% and rising run XP SP2, so you’ve taken that to assume that the other 77% all use IE6 , Lol!
A few very popular web apps have already dropped support for IE6 and netmag has started a crusade for all designers to band together and force people to drop it.
I for one, on my own projects, have dropped support for IE6, people who carry on supporting it , like a loving mother supports a badly behaved child, are only lengthening the time it will be use, as web developers and designers its within our power to force people to upgrade.
IE6 ruins the user experience for others and wastes our time and money, its insecure, doesn’t work as intended and just plain rubbish.
Hi Marc, while Chris’s logic might be a little flawed, keep in mind that he wrote his comment 2 1/2 years ago.
Chris, you make a good point, and I’m certainly not holding my breath. My comment did seem a little too eager, I suppose. Still, “never” and “forever,” I think, are as overly pessimistic as my comment was overly optimistic. After all, (almost) nobody bothers to support IE4 anymore, and fewer and fewer are supporting IE5.0.
So, we sit and wait and hope and pray that people switch to Firefox or Opera — or at least IE7. In the meantime, conditional comments are my new best friend.
How would you accomplish this with hover instead of click?
William, to target any of these selectors on hover, you would use the
.hover()method. For example:$("hovered_element").hover(function() {// Stuff to do when the mouse enters the element;
}, function() {
// Stuff to do when the mouse leaves the element;
});
Thank you! That little bit of information has really helped me move forward in learning jQuery. Great site! Please, keep up the posting.
Very nice! I was ripping my hair out trying to get the id of the first div with a specific class. Your example of $(‘li:lt(3)’) did the trick. I simply used the following:
var firstdiv = $(‘div.myclass:eq(0)’).id();
Thank you!
Hey DePaul, Glad you got it working. By the way, if you plan to switch to jQuery 1.1 when it’s released, you’ll need to use
.attr('id')instead of.id(), unless you use the compatibility plugin.Nice post, but …
This part of code :
$('#show-alert').click(function() {
$('<div class="quick-alert">Alert! Watch me before it\'s too late!</div>') .insertAfter( $(this) );
}
should be AVOIDED as is. Inserting HTML code like this is really ugly, it’s a lot better to use the DOM methods :
$('#show-alert').click(function() {
var oDIV = document.createElement('div');
oDiv.className = 'quick-alert';
oText = document.createTextNode("Alert ! Watch me before it's too late !");
$(oDiv).append(oText);
$(oDiv).insertAfter(this);
}
Or, with the DOMCreate plugin for jQuery :
$('#show-alert').click(function() {
var oDiv = jQuery.create('div', {'class':'quick-alert'}, ["Alert ! Watch me before it's too late !"]});
$(this).after(oDiv);
}
Regex selector please :)
What’s the code for selecting the external link?
Stefan, my powers of influence are very limited when it comes to feature requests. You might want to check out the jQuery Development Google Group for previous threads regarding regular expression selectors.
Wolfwood, if none of your internal links use a fully qualified URL (one beginning with “http”), you could do it this way:
$('a[@href^=http]'). If you’re not sure about how thehrefis written for every internal link, you could add a.not()method, like so:$('a[@href^=http]').not('[@href*=mysite.com]'), where “mysite.com” is your domain.I am wondering about this. How do I get the value of the attribute here on the main . I have a click event on the and I want to get the “id” to submit a URL. In this example I want to send the link “?m=delete&id=5″
I want to generate an alert when the user clicks on the button. I want to grab the “id” of the parent and the value of the with class=”title”
Sorry, table got messed up. Here is the table cells:
Hi Asle,
Looks like you need to change .parent() to .parents() and then tweak the “tid” line a bit. Give this a try:
Note: I also changed “tr” to “tr:first” in case you have nested tables.
Thanks, that solved it and gave me a better understanding of traversing!
Refering to your answer to Stefan, I want to submit a link after checking a form. It seems with jQuery I do not have to have <a> to make a link. I have a button in my last post. I need a confirm before sending the link. Should I have the button as a link or do it this way?
So answering yes would send a link to the same page with params. But the page is not loaded when I use the “return confirm” statement.
Hi Mike,
Part 2 has been out for a while. :)
To select all elements with a particular class unless they have a specific descendant element, you could do this:
$('.some-class:not(:has(someElement))')If you need to remove elements only based on their direct children (rather than any descendant), then you could do this:
This is only a TEST
How do you access the selectors on a parent page: IE I want to send selected checkbox values, from a window opened by javascript back to a textarea element on the parent page.?
thanks
sas
How would I access value 1, 2 and 3 in href? Right now to make it easy I have
stored my different values in id, in name and title attribute but that’s somehow
an abuse.
[a class="test" href="javascript:myFunction(value1,value2,value3)"]
thx
nice example. we can learn jquery easily by these type of examples. thanku
Anyone (or @Lidocain) Why is it “Inserting HTML code [via method here] really ugly”? And why is it “a lot better to use the DOM methods”?
The example you say “should be avoided” is much less code and simpler to read.
Great article. Using it I have managed to create an application that manipulates the DOM. How would any amendments such as things I may have appended be ’saved’ or ‘exported’ so that any changes I have made will be permanent?
Hi dwigg,
You can use ajax to send the new additions to the server.
Great article…
Hi to all,
I want to know, how get the pair [key=value] in this anchor:
<a href='#?key=value&key1=value' id='myanchor'>text</a>Best regards
Try this:
$('#myanchor')[0].search.split('&')[0].slice(1);I have being searching for days for a way to find an element with a given class. Is that possible?
For example: find all P with font-weight:bold. Or all DIV with background-color: yellow
I know I can use the filter() function, but is it possible using a selector? If not, this would be a nice new feature!
Thanks,
Martin
Good stuff here!
I wonder, is it possible to find an element by css, such as color?
This does not work, though: $(“div[color='red']“).
I know I can use a filter for this, but is it possible to do it with a selector only?
Regards,
Martin
Hi Martin,
Too much computation (and, therefore, scripting) needs to occur for that sort of selector, so it’s not a part of core. You might find something like it in George Adamson’s Extra Selectors plugin (which I’ve updated here for jQuery 1.3+).
Nice tutorial! Thanks for sharing ;)
how would i grab everything whos name element starts with “bob”
This will get all inputs, but how do i get everything, input or not?
$(“input[@name^=bob]“).css(“border”, “3px solid red”);
Also this seems to work wtih jquery 1.2.6 but not with 1.3.2
Thanks,
Eric-
Hi Eric,
If you want to all elements, use this as your selector:
$('[name^=bob]').Very cool,
One question, it works in 1.2.1 but in 1.3.2 ^= and *= dont’ seemt o work,
do you know what the new syntax is?
Thanks,
Eric-
Hi Eric,
Thanks for the note. I just updated the post to reflect the change in jQuery’s attribute selector syntax. Up to jQuery 1.1.4, attributes were selected with
[@attribute], but in jQuery 1.2.x versions the “@” was deprecated, and as of jQuery 1.3 it was removed completely. Try those examples again without the “@” symbol.VERY useful. I used this today and it was exactly what I needed. Thank you for sharing :)
Hello, I’d like to be able to toggle the background color between two links. So when you click one, the background turns yellow and if you click the next, it turns yellow and ‘deselects’ the previously clicked link’s background color. I haven’t been able to wrap my brain around this. If anyone has a suggestion I would be very grateful.
Hi,
Nice Article, Nice examples.
The example “should be avoided” is really less code and simpler to read.
Thanks
I try to access the div with class “ulError” without success.
I tried those :
$(‘#test:eq(1)’)…. didn’t worked.
$’#test > .ulError’)… didn’t worked.
How can I get the div from the TD #test ?
The second thing you tried should work (provided you put an opening paren after the $):
I put up a demo to show you that it works. View Source to see.
One more thing: make sure you’re not using “curly quotes.”
Yeah I noticed I did another error in my code when I tried this one… so yes in fact I think it should have worked! Thanks
$(‘#test .ulError’) worked! :P Thanks ;)
Hi thank you very much for this article (and the feedback you provide to people).
Written more than 3 years ago, and still one of the best doc of this sort: geat job.
Bye
JC