javascript - jQuery 包装全部 : preserving hierarchy of DOM elements

Question

我在尝试将 html 标签包裹在以下结构的元素周围时遇到麻烦:

<div id="xmlText">
    <a class="w" id="0">This</a>
    <a class="s" id="1"> </a>
    <a class="w" id="2">is</a>
    <a class="s" id="3"> </a>
    <a class="w" id="4">a</a>
    <a class="s" id="5"> </a>
    <a class="w" id="6">short</a>
    <a class="s" id="7"> </a>
    <span tagName="noun" id="8"><a class="w" id="9">sentence</a></span>
    <a class="s" id="10">.</a>
</div>

id 范围从 6 到 10 的元素聚集在 jQuery 对象中:

var $selectedText = $();
var $elements = $('*', '#xmlText');
for (var i = 6; i <= 10; i++) {
    $selectedText = $selectedText.add($elements.get(i));
}

然后，我尝试将以下标记包裹在这些元素周围。

<span tagName="group"></span>

使用

$selectedText.wrapAll('<span tagName="group"></span>');

jQuery 丢失层次结构信息。

预期结果

<div id="xmlText">
    […]
    <a class="s" id="5"> </a>
    <span tagName="group">
        <a class="w" id="6">short</a>
        <a class="s" id="7"> </a>
        <span tagName="noun" id="8"><a class="w" id="9">sentence</a></span>
        <a class="s" id="10">.</a>
    </span>
</div>

但这就是我得到的:

<div id="xmlText">
    […]
    <a class="s" id="5"> </a>
    <span tagName="group">
        <a class="w" id="6">short</a>
        <a class="s" id="7"> </a>
        <span tagName="noun" id="8"></span>
        <a class="w" id="9">sentence</a>
        <a class="s" id="10">.</a>
    </span>
</div>

我想我明白发生了什么，但我不知道如何解决这个问题。

任何帮助将不胜感激。 谢谢。

Answer 1

您的$('*', '#xmlText')正在查找 ALL 子元素，一直到终端节点 - 例如您正在匹配孙子、孙子等...

您可能想要$('#xmlText').children()相反，它只会找到你的 <div> 的直接子代。节点。