Javascript: utilise xpath dans jQuery

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

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

Je veux 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 il ne fonctionne pas. Est-il une autre sémantique des requêtes XPath afin de les utiliser en JavaScript?

source d'informationauteur Adam Sh | 2012-09-03

  1. 10

    Vous pouvez ré-écrire vos requêtes xpath comme sélecteurs CSS:

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

    Vous pouvez obtenir le même effet que parent:: à l'aide de la :has pseduo sélecteur pour sélectionner un élément basé sur ses enfants: div.foo:has(> div.bar) sélectionner toutes les div éléments avec la classe foo qui ont un enfant div avec classe bar. C'est l'équivalent de div[@class="bar"]/parent::div[@class="foo"].

    Voir:

    Vous pourriez probablement cette approche dans plusieurs autres façons à l'aide de différentes combinaisons de jQuery DOM traversée de méthodes. Par exemple, ce ne sera pas une traduction 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 dans le CSS n'est pas l'équivalent exact de div[@class="someClass"] dans xpath. Le CSS va correspondre à <div class='foo someClass bar'>mais le xpath ne sera pas. Voir Brian Suda de l'article sur l'analyse des microformats avec XSLT pour plus de détails.

  2. 24

    Vous pouvez ajouter les résultats d'une XPath évaluation de jQuery sélection, j'ai jeté cette extension jquery qui semble fait 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;
}
  3. 4

    Tant que co-auteur de Méchant Bon XPathje la recommande pour la croix-navigateur en charge de XPath (sur les documents HTML, vous pouvez essayer de l'utiliser avec des documents XML, mais le soutien est incomplète).

    Nous nous félicitons de toute sorte de exactitude essai /test de performances sur notre bibliothèque. Au cours du développement, la bibliothèque a été testé sur internet explorer 7 à 10 plus de l'Android 2.2 navigateur qui n'est pas indigène en charge de XPath.

  4. 2

    Il n'y a pas de Croix-navigateur de mise en œuvre autant que je sache. Il y a un xpath plugin pour jQuery qui est dit est toujours en développement.

    Autres qu'il y a de Google-auteur de JavaScript et de la mise en œuvre du DOM Niveau 3 XPath spécification appelée wicked-bon-xpath qui est bon.

  5. 1

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

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

    si vous souhaitez sélectionner un élément à l'intérieur d'un iframe, à partir de la fenêtre parent, vous devez modifier le deuxième paramètre de evaulate() la fonction de l'iframe est l'élément de document, comme :

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

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

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

    jQuery seulement a un support limité pour XPath. Vous pouvez voir ce que ça fait du soutien ici:
    http://docs.jquery.com/DOM/Traversing/Selectors#XPath_Selectors

    Comme mentionné par @Ameoo vous pouvez utiliser la méthode evaluate, qui est disponible dans la plupart des navigateurs modernes - à l'exception, d'une manière prévisible, c'est à dire:
    jquery sélectionner l'élément par xpath