代码之家 › 专栏 › 技术社区 › naugtur

jquery在两个非同级元素之间选择元素

select dom jquery

naugtur · 技术社区 · 15 年前

(我已经删除了属性,但它是一个自动生成的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 当第一个元素悬停时。我不知道怎么做。假设我在第一个盘旋 IMP -它应该突出显示 hello world 和 text. 没有别的了。

现在最糟糕的是-我需要背景消失在鼠标上。

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

提示:在绑定hover和放置一些跨距等之前处理整个html是可以的,只要它不改变输出文档的外观。

2 回复 | 直到 8 年前

bobince 15 年前

在绑定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目前没有此功能。)

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

Stefano Verna 15 年前

这是一个完全非结构化的html,这是你应该永远避免的。但是,可以向要跟踪悬停的img添加一些数据,如下所示:

[...]
<img src="#" class="master" data-friends-group="group1"/>
[...]
<span class="group1">text1</span>
[...]
<span class="group1">text2</span>
[...]

你现在可以从 "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;