javascript - 如何动态地将一个 div 中的元素包装在另一个 div 中？

Question

我有以下 WordPress 内容输出:

<a href="#">link1</a>
text1
<br>
<br>
<a href="#">link2</a>
text2
<br>
<br>
<a href="#">link3</a>
text
<br>
<br>
<a href="#">link4</a>
text4
<br>
<br>

我无权编辑内容，因此我希望通过 jQuery 对其进行编辑。我需要在 div 中的下一个链接之前用文本和 br 包装每个链接，然后将其分成两列。所以最终的结果应该是这样的:

<div class="col-left">
    <div class="item">
        <a href="#">link1</a>
        text1
        <br>
        <br>
    </div>
    <div class="item">
        <a href="#">link2</a>
        text2
        <br>
        <br>
    </div>
</div>
<div class="col-right">
    <div class="item">
        <a href="#">link3</a>
        text3
        <br>
        <br>
    </div>
    <div class="item">
        <a href="#">link4</a>
        text4
        <br>
        <br>
    </div>
</div>

知道如何使用 jQuery 实现这一点吗？

我试过像这样使用 .wrap() :

$('a').wrap( "<div class='item'></div>" );

Answer 1

这是一个非常有趣的挑战。

快速解释...
jQuery 在获取未包含在任何标记中的文本元素时似乎很困难，因此我们必须先将它们包装起来。我用过<span> .我使用了 this post 中的代码这样做。

现在它们都被很好地包裹起来了，我们可以选择我们感兴趣的元素，并找到中间点。如果我们有一个奇数，让我们调用Math.ceil , 这样多余的一个就会出现在左列中。

var a = $('a');
var i = Math.ceil(a.length/2);

现在让我们通过调用 $.slice 获取第一列和第二列元素。 .

var firstColEls = a.slice(0,i);
var secondColEls = a.slice(i);

我们现在可以遍历元素并添加 <div>与 item类(class)。我正在使用 itemC1 和 itemC2 以便我们稍后可以快速选择所有分组的元素。该类可以具有相同的样式。

$.each(firstColEls, function(idx,el){
    $(el).nextUntil('a').addBack().wrapAll('<div class="itemC1"></div>');
});
$.each(secondColEls, function(idx,el){
    $(el).nextUntil('a').addBack().wrapAll('<div class="itemC2"></div>');
});

现在让我们选择项目，并将所有项目(一起)包裹在左/右列 div 中!

$('.itemC1').wrapAll('<div class="l"></div>');
$('.itemC2').wrapAll('<div class="r"></div>';

那不是很有趣吗？ :). Working Fiddle .