Question

我有这个HTML

<div class="box">
    <a href="#goals"> | <a href="#rules"> | <a href="#controls">
    <p><a name="goals"></a></p>
    <h2>Goals</h2>
    ... yada yada

并希望这样。

<div id="nav">
    <a href="#goals"> | <a href="#rules"> | <a href="#controls">
</div>

JQuery有wrapAll（），但我只能选择链接所以“|”离开了div。

之前（'div'）和之后（'div'）创建一个封闭的元素，如<div></div>那么该怎么做？

我正在使用

$('.box a[href^="#"]')

选择链接。它们是文本资源文件的一部分，因此我无法编辑任何内容。

Answer 1

将有效标记作为输入，这可以：

// find first link - using jQuery for expedience here
var a = $('.box > a')[0];

// create new div, and insert it before the link
var d = document.createElement('div');
d.id = 'nav';
a.parentNode.insertBefore(d, a);

// for each following node, reparent it inside the div
while (a && a.tagName !== 'P') {
    var n = a.nextSibling;
    d.appendChild(a);
    a = n;
};

没有jQuery实际上更容易，因为jQuery没有提供简单的方法来获取菜单中包含的文本节点。

http://jsfiddle.net/HpgJV/3/

的工作演示

要修复错误的HTML输入，请尝试以下操作：

$('.box a[href^="#"]').each(function() {
    $(this).contents().insertAfter(this);
});

会移动 <a>标记内的任何文本节点，因为标记无效，因此它们会在标记之后。

使用JavaScript / jQuery包装一组混合的文本节点和HTML元素

1 个答案: