Javascript:在jQuery中使用xpath

Question

例如,我有下一个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中使用它们？

Answer 1

您可以将现有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;
}

Answer 2

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

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

您可以实现与parent::使用:haspseduo选择器基于其子元素选择元素相同的效果:div.foo:has(> div.bar)将选择div具有带类foo的子div类的所有元素bar.这相当于div[@class="bar"]/parent::div[@class="foo"].

看到:

• jQuery API:选择器
• 嘶嘶声的文件

您可以使用各种组合jQuery的DOM遍历方法以其他几种方式处理此问题.例如,这将是您的xpath查询的非常直接的转换:

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

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