17

例如，我有下一个 XPath 查询：

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

我想在 JavaScript 中使用这个 XPath 查询：

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

我试过这个：

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

但它没有用。XPath 查询是否有另一种语义以便在 JavaScript 中使用它们？

4

8 回答 8

24

您可以将现有 XPath 评估的结果添加到 jQuery 选择中，我将这个 jquery 扩展拼凑在一起，它似乎为您完成了所有工作。

示例用法：

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

这是加载项。

$.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;
}
于 2013-12-10T13:32:24.060 回答
17

您可以将 xpath 查询重写为 CSS 选择器：

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

parent::您可以达到与使用:haspseduo 选择器根据其子元素选择元素相同的效果：div.foo:has(> div.bar)将选择所有具有 class且具有 class子div元素的元素。这相当于。foodivbardiv[@class="bar"]/parent::div[@class="foo"]

看：

您可能可以使用jQuery 的 DOM 遍历方法的各种组合以其他几种方式来解决此问题。例如，这将是您的 xpath 查询的非常直接的翻译：

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

值得注意的是，div.someClass在 CSS 中并不完全等同于div[@class="someClass"]在 xpath 中。CSS 会匹配<div class='foo someClass bar'>，但 xpath 不会。有关更多详细信息，请参阅Brian Suda 关于使用 XSLT 解析微格式的文章。

于 2012-09-03T08:00:26.677 回答
4

作为Wicked Good XPath的合著者，我当然推荐它用于跨浏览器 XPath 支持（在 HTML 文档上，您可以尝试将它与 XML 文档一起使用，但支持不完整）。

我们欢迎对我们的库进行任何类型的正确性测试/性能基准测试。在开发过程中，该库已在 IE 7 到 10 以及不支持原生 XPath 的 Android 2.2 浏览器上进行了测试。

于 2012-09-07T19:32:34.377 回答
2

据我所知，没有跨浏览器实现。有一个用于 jQuery 的xpath 插件，它说仍在开发中。

除此之外，还有一个由 Google 编写的 DOM Level 3 XPath 规范的纯 JavaScript 实现，称为wicked-good-xpath，这很好。

于 2012-09-03T07:51:34.443 回答
2

如果要从父窗口中选择 iframe 内的元素，则应将 evaulate() 函数的第二个参数更改为 iframe 的文档元素，例如：

var iFrameDocument = $('iframe#myPage').get(0).contentWindow.document;
xpathResult = this[0].evaluate(xpathExpression, iFrameDocument, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);
于 2014-08-24T18:15:02.543 回答
1

我不确定该parent::div子句，但如果没有它，它应该如下所示：

$('div[span="something"] div.someClass');
于 2012-09-03T07:42:42.727 回答
0

从这里阅读有关该evaluate方法的信息： https ://developer.mozilla.org/en-US/docs/Introduction_to_using_XPath_in_JavaScript

var xpathResult = document.evaluate( xpathExpression, contextNode, namespaceResolver, resultType, result );
于 2012-09-03T07:41:46.683 回答
0

jQuery 对 XPath 的支持有限。您可以在此处查看它所支持的内容：http: //docs.jquery.com/DOM/Traversing/Selectors#XPath_Selectors

正如@Ameoo 所提到的，您可以使用在大多数现代浏览器中都可用的评估方法 - 除了可以预见的 IE： jquery select element by xpath

于 2012-09-03T07:43:41.087 回答