Question

I have, for example, the next XPath query:

//div[span="something"]/parent::div/child::div[@class=\"someClass\"]

I want to use this XPath query in JavaScript:

return $("a:contains('Fruits')").mouseover();

I tried this:

return $("div[span=\"something\"]/parent::div/child::div[@class=\"someClass\"]").mouseover();

But it didn’t work. Is there another semantic for XPath queries in order to use them in JavaScript?

Answer 1

You can re-write your xpath queries as CSS selectors:

$('div:has(> div > span:contains(something)) > div.someClass');

You can achieve the same effect as parent:: using the :has pseduo selector to select an element based on its children: div.foo:has(> div.bar) will select all div elements with class foo that have a child div with class bar. This is equivalent to div[@class="bar"]/parent::div[@class="foo"].

See:

• jQuery API: Selectors
• Sizzle documentation

You could probably approach this in several other ways using various combinations jQuery’s DOM traversal methods. For example, this would be a very direct translation of your xpath query:

$('div:has(> span:contains(something))')  // //div[span="something"]
    .parent('div')                        // /parent::div
    .children('div.someClass');           // /child::div[@class="someClass"]

It’s worth noting that div.someClass in CSS isn’t the exact equivalent of div[@class="someClass"] in xpath. The CSS will match <div class='foo someClass bar'>, but the xpath won’t. See Brian Suda’s article on parsing microformats with XSLT for more detail.