72

I have an XPath selector. How can I get the elements matching that selector using jQuery?

I've seen https://developer.mozilla.org/en/Introduction_to_using_XPath_in_JavaScript but it doesn't use jQuery, and it seems a little too verbose, and I suppose it's not cross-browser.

Also, this http://jsfiddle.net/CJRmk/ doesn't seem to work.

alert($("//a").length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<a href="a1.php"></a>
<a href="a2.php"></a>
Syscall
  • 19,327
  • 10
  • 37
  • 52
Quamis
  • 10,924
  • 12
  • 50
  • 66

3 Answers3

161

If you are debugging or similar - In chrome developer tools, you can simply use

$x('/html/.//div[@id="text"]')
Jeppe Liisberg
  • 3,734
  • 3
  • 25
  • 24
  • 10
    @GregT ... and Firefox – Alois Mahdal Nov 13 '13 at 22:36
  • @AloisMahdal, it looks like it's a Firebug thing (not 100% sure that it isn't also part of Firefox). [Documentation on Firebug's site](https://getfirebug.com/wiki/index.php/$x). It's also just shorthand for `document.evaluate()`, which @WladimirPalant mentioned. – Kat Jan 05 '15 at 21:53
  • Firefox developer tools [implement it as well](http://hg.mozilla.org/mozilla-central/annotate/206205dd8bd1/toolkit/devtools/webconsole/utils.js#l1559). And sure enough, it's a very simple convenience wrapper around `document.evaluate()`. [More info on the helper commands](https://developer.mozilla.org/en-US/docs/Tools/Web_Console#Helper_commands) – Wladimir Palant Jan 07 '15 at 19:20
  • 5
    And for select and use functions on it, this does not work: `$x('/html/.//div[@id="text"]').hide();` must use instead this: `$($x('/html/.//div[@id="text"]')).hide();` – Nabi K.A.Z. Nov 19 '17 at 16:08
  • 2
    Note that `$x()` is NOT jQuery. It is returning HTML DOM. `.hide()` is a jQuery function, so you need to wrap the HTML DOM in a `$()` to access jQuery functions, just like if you used any other native JS DOM functions. – Nelson Jul 23 '20 at 07:55
  • this selects the element. How do i set the value into it? – anandhu Jan 08 '21 at 14:14
28

document.evaluate() (DOM Level 3 XPath) is supported in Firefox, Chrome, Safari and Opera - the only major browser missing is MSIE. Nevertheless, jQuery supports basic XPath expressions: http://docs.jquery.com/DOM/Traversing/Selectors#XPath_Selectors (moved into a plugin in the current jQuery version, see https://plugins.jquery.com/xpath/). It simply converts XPath expressions into equivalent CSS selectors however.

Wladimir Palant
  • 56,865
  • 12
  • 98
  • 126
26

First create an xpath selector function.

function _x(STR_XPATH) {
    var xresult = document.evaluate(STR_XPATH, document, null, XPathResult.ANY_TYPE, null);
    var xnodes = [];
    var xres;
    while (xres = xresult.iterateNext()) {
        xnodes.push(xres);
    }

    return xnodes;
}

To use the xpath selector with jquery, you can do like this:

$(_x('/html/.//div[@id="text"]')).attr('id', 'modified-text');

Hope this can help.

Nanang El Sutra
  • 477
  • 6
  • 10