web-dev-qa-db-fra.com

Javascript: utiliser xpath dans jQuery

J'ai, par exemple, la prochaine requête XPath:

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

Je souhaite utiliser cette requête XPath en JavaScript:

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

J'ai essayé ceci:

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

Mais ça n'a pas marché. Existe-t-il une autre sémantique pour les requêtes XPath afin de les utiliser en JavaScript?

javascriptjqueryxpath
12
Adam Sh

Vous pouvez réécrire vos requêtes xpath en tant que sélecteurs CSS:

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

Vous pouvez obtenir le même effet que parent:: en utilisant le sélecteur :has pseduo pour sélectionner un élément en fonction de ses enfants: div.foo:has(> div.bar) sélectionnera tous les éléments div de classe foo ayant un enfant div de classe bar. Ceci est équivalent à div[@class="bar"]/parent::div[@class="foo"].

Voir:

Vous pourriez probablement aborder cela de plusieurs autres manières en utilisant diverses combinaisons méthodes de traversée de DOM de jQuery . Par exemple, ce serait une traduction très directe de votre requête xpath:

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

Il est intéressant de noter que div.someClass en CSS n'est pas l'équivalent exact de div[@class="someClass"] dans xpath. Le CSS correspondra à <div class='foo someClass bar'>, mais pas le xpath. Voir L'article de Brian Suda sur l'analyse de microformats avec XSLT pour plus de détails.

9
georgebrock

Vous pouvez ajouter les résultats d'une évaluation XPath existante à une sélection jQuery. J'ai assemblé cette extension jquery qui semble faire tout pour vous. 

Exemple d'utilisation: 

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

Voici le complément. 

$.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;
}
25
Orwellophile

En tant que co-auteur de Wicked Good XPath , je le recommande certainement pour le support XPath entre navigateurs (sur les documents HTML, vous pouvez essayer de l’utiliser avec des documents XML mais le support est incomplet).

Nous nous félicitons de tout type de test d’exactitude/test de performance de notre bibliothèque. Au cours du développement, la bibliothèque a été testée sur IE 7 à 10, plus le navigateur Android 2.2 ne prenant pas en charge XPath en natif.

4
Dominator008

Pour autant que je sache, il n'y a pas d'implémentation multi-navigateurs. Il y a un plugin xpath pour jQuery qui dit est encore en développement. 

En dehors de cela, il existe une implémentation JavaScript pur de la spécification DOM Level 3 XPath créée par Google et appelée wicked-good-xpath qui est bonne.

2
sv_in

Je ne suis pas sûr de la clause parent::div, mais sans elle, elle devrait ressembler à ceci:

$('div[span="something"] div.someClass');
1
Constantinius

si vous souhaitez sélectionner un élément dans une iframe, depuis la fenêtre parente, vous devez remplacer le deuxième paramètre de la fonction evaulate () par l'élément de document iframe, comme suit:

var iFrameDocument = $('iframe#myPage').get(0).contentWindow.document;
xpathResult = this[0].evaluate(xpathExpression, iFrameDocument, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);
1
spetsnaz

lisez à partir d'ici la méthode evaluate: https://developer.mozilla.org/en-US/docs/Introduction_to_using_XPath_in_JavaScript

var xpathResult = document.evaluate( xpathExpression, contextNode, namespaceResolver, resultType, result );
0
CosminO

jQuery a seulement un support limité pour XPath. Vous pouvez voir ce qu’il supporte ici: http://docs.jquery.com/DOM/Traversing/Selectors#XPath_Selectors

Comme mentionné par @Ameoo, vous pouvez utiliser la méthode d'évaluation, disponible dans la plupart des navigateurs modernes - à l'exception, bien entendu, de IE: jquery select element by xpath

0
Robin Winslow