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

Wrap a mixed set of text nodes and HTML elements with JavaScript / jQuery

本文关键字：文本 混合 节点 元素 HTML 一组 jQuery JavaScript 包装      更新时间：2023-09-26

我有这个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之外。

before（'div'）和after（'div`）创建了一个封闭元素，比如<div></div>，那么该怎么办呢？

我正在使用

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

以选择链接。它们是文本资源文件的一部分，所以我不能编辑任何内容。

给定有效的标记作为输入，这是有效的：

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

这将移动由于无效标记而在CCD_ 2标签内丢弃的的任何文本节点。

相关文章：