jquery选择不是兄弟姐妹的两个元素之间的元素 [英] jquery select elements between two elements that are not siblings

问题描述

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

(I've removed attributes, but it's a bit of auto-generated HTML.)

<img class="p"/>
<div> hello world
    <p>
        <font><font size="2">text.<img class="p"/>
        some text
        </font></font>
    </p>
    <img class="p"/>
    <p> <font><font size="2">more text<img class="p"/>
        another piece of text
        </font></font>
    </p><img class="p"/> some text on the end
</div>

我需要将背景上的一些高亮应用于两个最接近的文本之间（在HTML代码中） img.p 元素时，首先悬停它们。我不知道该怎么做让我说，我将鼠标悬停在第一个 img.p - 它应该突出显示 hello world 和文本。 ，没有别的。

I need to apply some highlighting with backgrounds to all text that is between two closest (in the HTML code) img.p elements when hovering first of them. I have no idea how to do that. Lets say I hover the first img.p - it should highlight hello world and text. and nothing else.

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

And now the worst part - I need the backgrounds to disappear on mouseleave.

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

I need it to work with any HTML mess possible. The above is just an example and structure of the documents will differ.

提示：在绑定悬停之前处理整个html并放置一些span等等只要它不改变输出文件的外观。

Tip: Processing the whole html before binding hover and putting some spans etc. is OK as long as it doesn't change the looks of the output document.

推荐答案

在绑定之前处理整个html并且放一些span等等是确定的

Processing the whole html before binding hover and putting some spans etc. is ok

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

You certainly would have to do that, as you can't style text nodes, only elements.

这是一个可以用来从脚本执行的功能。 （不幸的是，jQuery在这里没有太多用处，因为它不喜欢处理文本节点。）

Here's a function you could use to do it from script. (Unfortunately jQuery isn't much use here as it doesn't like handling text nodes.)

// 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目前没有这个功能。）

And here's some functions that you could use to select nodes between other nodes. (Again, jQuery doesn't currently have a function for this.)

// 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= $('#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');
    });
});

这篇关于jquery选择不是兄弟姐妹的两个元素之间的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！