如何在另一個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> 。 我已經使用了這篇文章中的代碼來做到這一點。

現在它們都被很好地包裝了，我們可以選擇我們感興趣的元素，並找到中間點。 如果我們有一個奇數，我們將其稱為Math.ceil ，以便多余的數字以Left列結尾。

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

現在，通過調用$.slice獲取第一列和第二列元素。

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

現在，我們可以遍歷元素，並在item類中添加<div> 。 我正在使用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>';

那不是很有趣嗎？ :)。 工作小提琴 。

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

而這里的的的jsfiddle。 干杯。