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>

在jQuery对象中收集id为6到10的元素：

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')正在查找所有子元素，一直到终端节点 - 例如你和大孩子，曾孙子等相配......

您可能希望$('#xmlText').children()代替<div>节点的直接子节点。

jQuery wrapAll：保留DOM元素的层次结构

1 个答案: