使用XPath选择器在jQuery中选择元素

Question

我有一个XPath选择器。 如何使用jQuery获取与该选择器匹配的元素？

我看过https://developer.mozilla.org/en/Introduction_to_using_XPath_in_JavaScript，但它没有使用jQuery，而且似乎有点啰嗦，我认为它不是跨浏览器的。

此外，http://jsfiddle.net/CJRmk/似乎不起作用。

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>

- Quamis

Answer 1

如果您正在调试或类似情况 - 在Chrome开发者工具中，您可以简单地使用

$x('/html/.//div[@id="text"]')

- Jeppe Liisberg

---

@GregT ... 和 Firefox - Alois Mahdal

@AloisMahdal，看起来这是Firebug的问题（不能确定它是否也是Firefox的一部分）。Firebug网站上的文档。这也只是document.evaluate()的简写形式，正如@WladimirPalant所提到的。 - Kat

Firefox 开发者工具也实现了它。确实，这是一个非常简单的便利包装器，围绕document.evaluate()。更多关于辅助命令的信息。 - Wladimir Palant

要在选定的元素上使用功能并对其进行操作，这种写法是无效的：$x('/html/.//div[@id="text"]').hide(); 应改为 $($x('/html/.//div[@id="text"]')).hide();，只有这样才能使代码正常运行。 - Nabi K.A.Z.

请注意，$x()不是jQuery。它返回的是HTML DOM。.hide()是一个jQuery函数，因此您需要将HTML DOM包装在$()中以访问jQuery函数，就像使用任何其他本机JS DOM函数一样。 - Nelson

这会选择元素。我该如何将值设置到其中？ - anandhu

Answer 2

document.evaluate()是DOM Level 3 XPath规范，Firefox、Chrome、Safari和Opera都支持它，唯一不支持的主流浏览器是MSIE。尽管如此，jQuery支持基本的XPath表达式：http://docs.jquery.com/DOM/Traversing/Selectors#XPath_Selectors（在当前版本中已被移入插件中，请参见https://plugins.jquery.com/xpath/）。但是，它只是将XPath表达式转换为等效的CSS选择器。

- Wladimir Palant

---

这是一个旧版本的jQuery选择器API。 - Karolis

@Karolis：你说得对，看起来这个功能已经被移动到了插件中。我编辑了我的答案以添加这个信息。 - Wladimir Palant

Answer 3

首先创建一个 XPath 选择器函数。

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

要使用 jQuery 的 xpath 选择器，可以这样做：

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

希望这可以帮到您。

- Nanang El Sutra

---

我认为如果文档使用命名空间并且在IE10-11中（XPath不受支持），这将不起作用。 - To delete profile

谢谢，我已经在Behat/Mink代码中使用了你的_x()函数来解决在某些情况下find('xpath'，'xpath表达式')结果不足的问题。 - myselfhimself