[removed] 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 XP

Answer 1

There is no Cross-browser implementation as far as I know. There is a xpath plugin for jQuery which says is still in developement.

Other than that there is a Google-authored pure JavaScript implementation of the DOM Level 3 XPath specification called wicked-good-xpath which is good.

Answer 2

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.

Answer 3

jQuery only has limited support for XPath. You can see what it does support here: http://docs.jquery.com/DOM/Traversing/Selectors#XPath_Selectors

As mentioned by @Ameoo you can use the evaluate method, which is available in most modern browsers - except, predictably, IE: jquery select element by xpath

Answer 4

As the co-author of Wicked Good XPath, I certainly recommend it for cross browser XPath support (on HTML documents, you can try using it with XML documents but the support is incomplete).

We welcome any sort of correctness test / performance benchmark on our library. During development, the library has been tested on IE 7 through 10 plus the Android 2.2 browser which doesn't have native XPath support.

Answer 5

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;
}

Answer 6

read from here about the evaluate method : https://developer.mozilla.org/en-US/docs/Introduction_to_using_XPath_in_JavaScript

var xpathResult = document.evaluate( xpathExpression, contextNode, namespaceResolver, resultType, result );