Question

假设我有这个HTML

<div class="parent">
    <span class="foo">Some text</span>
    <span class="foo">FROM HERE</span>
    <span class="foo">some text</span>
    <span class="foo">TO HERE</span>
    <span class="foo">some text</span>
</div>

现在我已经将目标元素设为$(start)和$(end)。我想在一个说鼠标上制作这个html

<div class="parent">
    <span class="foo">Some text</span>
    <span class="highlight">
        <span class="foo">FROM HERE</span>
        <span class="foo">some text</span>
        <span class="foo">TO HERE</span>
    </span>
    <span class="foo">some text</span>
</div>

这个我想恢复原状。

这与我已经拥有'目标元素'的this question有关。

如果它更容易，结构可能总是如上所述。 spans中div的集合。我觉得jQuery nextUntil可能是最好的方法，但我不能完全解决它。

Answer 1

您可以使用.wrapAll()和.unwrap()在jQuery中包装元素集合：

Fiddle Demo

添加亮点：

var $wrapped = highlight($start, $end, '.foo'); // highlight and get the highlighted items collection

删除突出显示：

$wrapped.unwrap(); // use unwrap on the collection to remove highlight

突出显示功能：

function highlight($start, $end) {
    /** return the wrapped collection **/
    return $start
        .nextUntil($end) // get elements between $start and $end
        .addBack() // add $start back
        .add($end) // add $end
        .wrapAll("<span class='highlight' />"); // wrap them with highlight
}

围绕2个兄弟元素与跨度

1 个答案: