Javascript: use xpath in jQuery

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 could add the results of an existing XPath evaluation to a jQuery selection, I threw together this jquery extension that seems does it all for you.

Example usage:

$(document).xpathEvaluate('//body/div').remove()

Here's the add-in.

$.fn.xpathEvaluate = function (xpathExpression) {
   // NOTE: vars not declared local for debug purposes
   $this = this.first(); // Don't make me deal with multiples before coffee

   // Evaluate xpath and retrieve matching nodes
   xpathResult = this[0].evaluate(xpathExpression, this[0], null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);

   result = [];
   while (elem = xpathResult.iterateNext()) {
      result.push(elem);
   }

   $result = jQuery([]).pushStack( result );
   return $result;
}