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中的下一个链接之前用text和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类。我使用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

Answer 2

您是否尝试过这样设置变量：

if (check how many links) {
var wrapLinkLeft = $('<div class="col-left"><div class="item"><a href="#">link1<br><br></a></div></div>');
var wrapLinkRight = $('<div class="col-right"><div class="item"><a href="#">link2<br><br></a></div></div>');

 $(wrapLinkLeft).appendTo('body'); //for example append it to the body
 }

使链接动态保持为空并将其附加到href，这意味着您可能需要为此href设置类或ID或构建计数器以跟踪脚本的位置。

Answer 3

这是我能得到的最接近的。它给出了预期的结果，但我不确定它是否非常灵活。

var textNodes = $('a').first().parent().contents().filter(function() {
    return this.nodeType === 3 && $(this).text() !== "\n";
});
$(textNodes).each(function() {
    $(this).wrap('<span></span>');
});

var groups = $('a');
$(groups).each(function(index, item) {
    $(item).before('<div class="item"></div>');
    var theDiv = $(item).prev();
    var theItem = $(item).detach();
    var theRest = theDiv.nextUntil('a').detach();
    theDiv.append(theItem);
    theDiv.append(theRest);
    theDiv.find('span').contents().unwrap();
});

var theDivs = $('.item');
var half = theDivs.length / 2;

$(theDivs).first().before('<div class="col-left"></div><div class="col-right"></div>');
var i;
for (i = 0; i < half; i++)
{
    var nextDiv = $(theDivs[i]).detach();
    $('.col-left').append(nextDiv);
}
for (; i < theDivs.length; i++)
{
    var nextDiv = $(theDivs[i]).detach();
    $('.col-right').append(nextDiv);
}

而here是JSFiddle。欢呼声。

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

3 个答案: