Search code examples
javascriptjqueryselectordescendant

How do I access direct descendants of a jquery object cleanly?

I have the following line in my js

var description = jqref.children('.category_info').children('.description').children('p').html();

which works exactly how I want it, though to me it feels way too clunky which feels like I am overlooking a better selector method.

I'm fairly certain I ought to be using the > direct child symbol but can't seem to implement it in the normal way as I am already dealing with a jquery object.

Solution

  • Use find with the child selector. I learned something new; you can prepend the selector with a child selector to make sure that you only get children:

    var description = jqref.find('> .category_info > .description > p').html();

    JSFiddle: http://jsfiddle.net/5SktL/