jQuery selector anchor inside div

Question

I have the following HTML code:

<div id="mycontainer">
   <p> title </p>
   <ul>
   <li><span>**</span><a href="...">KEY</a></li>
   </ul>
   <ul>
   ...
   </ul>
</div>

How would I get the KEY value? In other words, from this div with id = "mycontainer", how would I go to get from the first ul, the content of the element?

Solution 1

$("#mycontainer ul:first a").text();

here, have a fiddle: http://jsfiddle.net/8tvTt/

Solution 2

Something like this will achieve what you're after:

$("#mycontainer ul:first a").text();

Solution 3

Use this:

$('#mycontainer a').text();

Solution 4

While a lot of the existing answers will achieve what you're after, I think what you're really asking for (or at least what you really need) is some familiarity with jQuery selectors and DOM traversing.

A lot of people seem to be assuming that you want the inner text of the link element, which I am not sure is the case. Without providing for variations on this markup and without concern for speed of selectors, any number of answers will do what you want, including something as silly as $('a').text(); since its the only a in the markup you provided. And we can only guess about the circumstances. It'd be more helpful to understand how each of the answers works (and why the unsuccessful ones don't, for that matter) and why.

Specificity of selectors are desirable, but you have to weigh the costs and benefits of what can actually be costly trips through the DOM. Will you always be getting the text content of a link? Could it possibly ever contain html? Do you actually want to get the wrapping <a> as well?

If you just want the text content of the only a inside #mycontainer, sure:

$("#mycontainer ul:first a").text();

But $('#mycontainer').find('a').text(); might be faster. (Wait, what's find()?, you ask, and why is it faster?) But what if KEY is formatted <strong>ly, and you want that to carry over to whatever you're doing with it? You might want to use .html() instead. If you want the a itself, why not:

$("#mycontainer ul:first a");

But what if each li has an a?

$("#mycontainer ul:first li:first a").clone();

Do you want the span, too?

$("#mycontainer ul:first li:first").clone();

or

$("#mycontainer ul:first li:first").html();

Do you want the wrapping <li> as well?

$("#mycontainer ul:first li:first").clone();

Play around, read some more, and then you wont get everyone (myself included) so ravenous for a few silly, easy rep.

Solution 5

This works:

$('#mycontainer ul:eq(0) a').text();

This works too: (more readable)

$('#mycontainer ul:first a').text();

View more solutions

Comments

[Adriano Carneiro]

+1 I do not see why this was downvoted, since it's correct for OPs HTML. True, I would be more confortable with a more specific selector (see my answer), but do not agree with downvote.

[Hommer Smith]

I am wondering if that element does not exist. Would I get undefined or empty string? I tested it and I get empty string, even though I expected undefined. Is that normaL?

[dsgriffin]

When you concatenate undefined with a string it becomes a string