Jquery selector

Question

<a class='leftpanel_anchor' tag='solutions' href='javascript:void(0)' > Solutions to <span class='leftpanel_keywords'>firstConResult</span></a>

i have an anchor like this. i want to select the content inside span class 'leftpanel_keywords'. how can i do that with jquery???

Answer 1

Depending on the structure of your entire page.. there are several different ways you may want to format your selector:

$(".leftpanel_keywords").text()

will get you any element that has the class "leftpanel_keywords"

$("A.leftpanel_anchor .leftpanel_keywords")").text()

will get you the inner class "leftpanel_keywords" for any anchor that has a class "leftpanel_anchor"

Both of these will give you the text inside of the span.

Answer 2

$(".leftpanel_keywords").text();

Answer 3

$('a.leftpanel_anchor .leftpanel_keywords').text();

That will only select the ones within an anchor.

If there is more than one such occurence of that, you should condider giving at least the anchor an ID.

Answer 4

If I got the question right, there is a parent-child selector to do this:

$(".leftpanel_anchor > .leftpanel_keywords").text()

Answer 5

What's wrong with $('.leftpanel_keywords').text()?

Answer 6

If you want your result to have HTML in it (your span tags), use the .html() method. If not, use the .text() method as others have suggested:

$(".leftpanel_anchor").html(); //Returns everything, including <span> tags
$(".leftpanel_anchor").text(); //Returns only the text, minus any tags

Answer 7

You can use the CSS class selector to fetch the element. The class selector works like this:

$('.name_of_class')

This then returns a jQuery object of that DOM element, on which you can call various methods to do various things, such as animation, content manipulation and really anything that you can do with jQuery.

In your example here, you can fetch the innerHTML value (the element's content) by calling:

var content = $('.leftpanel_keywords').html();

There are plenty of places to read more about jQuery selectors, DOM traversing and DOM manipulation, some of the most vital parts of jQuery and basic building blocks for exciting functionality! Check out jQuery for Designers, a great collection of simple, hands on tutorials and screencasts. Also look at the jQuery official documentation, which is a comprehensive reference.

Hope this helps!