jQuery在单独的跨度中包含锚标记之前和之后的文本

Question

我有这段代码：

<p>Hi. I am your friend. you are my friend.<br> we <a href="both.html">both</a> are friends.</p>

我的目标是将文本放在锚标记之前以及锚标记之后插入单独的跨度。因此，我想在DOM中使用这样的东西：

<p><span>Hi. I am your friend. you are my friend.<br> we </span><a href="both.html">both</a><span> are friends.</span></p>

有人可以帮助我，告诉我如何在jQuery中做到这一点吗？

Answer 1

从answer开始，您应该可以执行以下操作：

$("p").contents().filter(function() {
    return this.nodeType == Node.TEXT_NODE;
}).wrap("<span/>");

Answer 2

问题是<a>之前或之后的内容可能包含其他DOM节点，因此它们不会仅仅是TEXT_NODE。这是一个实现的更长时间，但它完全达到了你的问题所说的结果。的 You can view a demo on JSFiddle

$.fn.wrapSides = function () {
    return this.each( function (index, el) {
       var $parent = $(el).parent(),
           contents = $.makeArray($parent.contents()),
           before, after, i, matched, build = $();

        for (i = 0; i < contents.length; i++) {
            if( contents[i] === el) {
                before = contents.slice(0, i);
                after = contents.slice( Math.min(contents.length - 1, i + 1), contents.length);
                matched = contents.slice(i,i + 1);
                break;   
            }
        };

        if (before && before.length) {
            build = build.add($("<span>").append(before));
        }

        build = build.add(matched);

        if (after && after.length) {
            build = build.add($("<span>").append(after));
        }

        $parent.html( build );
    }); 
};

您只需在要作为分割器的标签上调用它，因此在您的情况下，它将是a：

$("p a").wrapSides();