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();

しかし、うまくいきませんでした。JavaScript で XPath クエリを使用するための別のセマンティックはありますか?

4

8 に答える 8

17

xpathクエリをCSSセレクターとして書き直すことができます。

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

parent::pseduoセレクターを使用して、:hasその子に基づいて要素を選択するのと同じ効果を得ることができます。クラスを持つ子を持つクラスを持つdiv.foo:has(> div.bar)すべての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"]

CSSではxpathdiv.someClassとまったく同じではないことに注意してください。div[@class="someClass"]CSSは一致<div class='foo someClass bar'>しますが、xpathは一致しません。詳細については、XSLTを使用したmicroformatsの解析に関するBrianSudaの記事を参照してください。

于 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プラグインがあります。

それ以外には、wicked-good-xpathと呼ばれる DOM レベル 3 XPath 仕様の Google 作成の純粋な JavaScript 実装があり、これは優れています。

于 2012-09-03T07:51:34.443 に答える
1

節についてはよくわかりませんparent::divが、それがなければ次のようになります。

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

jQuery は、XPath の限定的なサポートのみを提供します。ここでサポートする内容を確認できます: http://docs.jquery.com/DOM/Traversing/Selectors#XPath_Selectors

@Ameoo で述べたように、最新のほとんどのブラウザで利用できる evaluate メソッドを使用できます - ただし、予想通り、IE: jquery select element by xpath

于 2012-09-03T07:43:41.087 に答える
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 に答える