jquery seleccionar elementos entre dos elementos que no sean hermanos

(He eliminado los atributos, pero es un poco de HTML generado automáticamente).

 
hello world

text. some text

more text another piece of text

some text on the end

Necesito aplicar algo de resaltado con fondos a todo el texto que se encuentra entre los dos elementos img.p más cercanos (en el código HTML) al pasar el primero de ellos. No tengo idea de cómo hacer eso. Digamos que paso el primer img.p : debería resaltar hello world y text. y nada más.

Y ahora, la peor parte: necesito que los fondos desaparezcan en la casa.

Lo necesito para trabajar con cualquier desorden HTML posible. Lo anterior es solo un ejemplo y la estructura de los documentos será diferente.

Consejo: el procesamiento de todo el html antes de vincular el hover y colocar algunos tramos, etc. está bien siempre que no cambie la apariencia del documento de salida.

Procesar el html completo antes de vincular el hover y poner algunos intervalos, etc. está bien

Ciertamente, tendría que hacerlo, ya que no puede diseñar nodos de texto, solo elementos.

Aquí hay una función que podrías usar para hacerlo desde el script. (Desafortunadamente, jQuery no es muy útil aquí ya que no le gusta manejar nodos de texto).

 // Wrap Text nodes in a new element of given tagname, when their // parents contain a mixture of text and element content. Ignore // whitespace nodes. // function wrapMixedContentText(el, tag) { var elementcontent= false; for (var i= el.childNodes.length; i-->0;) { var child= el.childNodes[i]; if (child.nodeType===1) { elementcontent= true; wrapMixedContentText(child, tag); } } if (elementcontent) { for (var i= el.childNodes.length; i-->0;) { var child= el.childNodes[i]; if (child.nodeType===3 && !child.data.match('^\\s*$')) { var wrap= document.createElement(tag); el.replaceChild(wrap, child); wrap.appendChild(child); } } } } 

Y aquí hay algunas funciones que podría usar para seleccionar nodos entre otros nodos. (De nuevo, jQuery actualmente no tiene una función para esto).

 // Get array of outermost elements that are, in document order, // between the two argument nodes (exclusively). // function getElementsBetweenTree(start, end) { var ancestor= getCommonAncestor(start, end); var before= []; while (start.parentNode!==ancestor) { var el= start; while (el.nextSibling) before.push(el= el.nextSibling); start= start.parentNode; } var after= []; while (end.parentNode!==ancestor) { var el= end; while (el.previousSibling) after.push(el= el.previousSibling); end= end.parentNode; } after.reverse(); while ((start= start.nextSibling)!==end) before.push(start); return before.concat(after); } // Get the innermost element that is an ancestor of two nodes. // function getCommonAncestor(a, b) { var parents= $(a).parents().andSelf(); while (b) { var ix= parents.index(b); if (ix!==-1) return b; b= b.parentNode; } return null; } 

Posible uso:

 var outer= document.getElementById('myhighlightingimagesdiv'); wrapMixedContentText(outer, 'span'); var ps= $('https://stackoverflow.com/questions/2514125/jquery-select-elements-between-two-elements-that-are-not-siblings/#myhighlightingimagesdiv .p'); ps.each(function(pi) { // Go up to the next image in the list, or for the last image, up // to the end of the outer wrapper div. (There must be a node // after the div for this to work.) // var end= pi===ps.length-1? outer.nextSibling : ps[pi+1]; var tweens= $(getElementsBetweenTree(this, end)); $(this).hover(function() { tweens.addClass('highlight'); }, function() { tweens.removeClass('highlight'); }); }); 

Esa es una pieza de HTML totalmente desestructurada, que es algo que siempre se debe evitar. Sin embargo, agrega algunos datos al img que desea rastrear para que se desplace, como esto:

 [...]  [...] text1 [...] text2 [...] 

Ahora puede capturar desde el atributo "data-friends-group" la clase en común a todos los elementos que necesita resaltar. Ahora el rest es cosa fácil.

 $(document).ready(function() { $("img.master").each(function() { $friends = $("." + $(this).attr("data-friends-group")); $(this).hover( function(){ $friends.addClass("highlighted"); }, function(){ $friends.removeClass("highlighted"); } ); }); }); 

Obviamente, la clase .hightlighted será la que tiene el background-color: yellow;