jquery选择两个不是兄弟元素的元素之间的元素

（我删除了属性，但它是一些自动生成的HTML。）

 
 hello world 
 text. some text  
  
 more text another piece of text  
 some text on the end  

我需要对所有文本应用一些突出显示，这些文本位于两个最接近（在HTML代码中） img.p元素之间，当它们首先hover时。 我不知道该怎么做。 让我们说我徘徊在第一个img.p – 它应该突出hello world和text. 没有别的。

而现在最糟糕的部分 – 我需要背景在mouseleave上消失。

我需要它来处理任何可能的HTML混乱。 以上只是一个例子，文件的结构会有所不同。

提示：只要不改变输出文档的外观，在绑定hover和放置一些跨度之前处理整个html就可以了。

Answer 1

在绑定hover和放置一些跨度等之前处理整个html是可以的

你当然必须这样做，因为你不能设置文本节点的样式，只能设置元素。

这是一个可以用来从脚本中执行此操作的函数。 （不幸的是jQuery在这里用得不多，因为它不喜欢处理文本节点。）

 // 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); } } } } 

这里有一些函数可用于在其他节点之间选择节点。 （同样，jQuery目前没有这个function。）

 // 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; } 

可能的用法：

 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'); }); }); 

Answer 2

这是一个完全非结构化的HTML，这是你应该总是避免的。 但是，您要为要hover的img添加一些数据，如下所示：

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

现在，您可以从"data-friends-group"属性中捕获您需要突出显示的所有元素的共同类。 现在其余的都很简单。

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

显然，类.hightlighted将是background-color: yellow;