Javascript: utilizar XPath en jQuery

Question

que tienen, por ejemplo, la siguiente consulta XPath:

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

quiero usar esta consulta XPath en JavaScript:

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

He intentado esto:

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

Pero no funcionó. ¿Hay alguna otra semántica para las consultas XPath para usarlas en JavaScript?

Answer 1

Se puede volver a escribir sus consultas XPath como selectores CSS:

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

Se puede lograr el mismo efecto que parent:: con el selector :has pseduo para seleccionar un elemento en base a sus hijos: div.foo:has(> div.bar) seleccionará todos div elementos con clase foo que tienen un hijo div con clase bar. Esto es equivalente a div[@class="bar"]/parent::div[@class="foo"].

Ver:

• jQuery API: Selectors
• Sizzle documentation

que probablemente se podría abordar esto en varias otras maneras usando varias combinaciones jQuery's DOM traversal methods. Por ejemplo, esto sería una traducción muy directa de la consulta XPath:

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

Vale la pena señalar que en div.someClass CSS no es el equivalente exacto de div[@class="someClass"] de XPath. El CSS coincidirá con <div class='foo someClass bar'>, pero el xpath no lo hará. Ver Brian Suda's article on parsing microformats with XSLT para más detalles.

Answer 2

lectura desde aquí sobre el método evaluate: https://developer.mozilla.org/en-US/docs/Introduction_to_using_XPath_in_JavaScript

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

Answer 3

No estoy seguro acerca de la cláusula parent::div, pero sin que se debería tener este aspecto:

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

Answer 4

jQuery tiene solamente soporte limitado para XPath. Se puede ver lo que es compatible aquí: http://docs.jquery.com/DOM/Traversing/Selectors#XPath_Selectors

Según lo mencionado por @Ameoo se puede utilizar el método de evaluar, que está disponible en la mayoría de los navegadores modernos - excepto, como era previsible, IE: jquery select element by xpath

Answer 5

No hay Implementación entre navegadores, hasta donde yo sé. Hay un xpath plugin para jQuery que dice que todavía está en desarrollo.

Aparte de eso, existe una implementación de JavaScript pura de Google propia de la especificación XPath DOM Level 3 llamada wicked-good-xpath que es buena.

Answer 6

Como coautor de Wicked Good XPath, ciertamente lo recomiendo para el soporte de XPath para navegadores cruzados (en documentos HTML, puede intentar usarlo con documentos XML pero la compatibilidad es incompleta).

Le damos la bienvenida a cualquier tipo de punto de referencia de prueba/rendimiento de corrección en nuestra biblioteca. Durante el desarrollo, la biblioteca se ha probado en IE 7 a 10 más el navegador Android 2.2 que no tiene soporte XPath nativo.

Answer 7

Puede agregar los resultados de una evaluación existente de XPath a una selección de jQuery, armé esta extensión de jquery que parece que lo hace todo para usted.

Ejemplo de uso:

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

Aquí está el complemento.

$.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 8

si desea seleccionar un elemento dentro de un iframe, desde la ventana padre, usted debe cambiar segundo parámetro de evaulate() para elemento de documento de marco flotante, como:

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