從一個元素到另一個元素的jQuery包裝

-1

在嘗試在div中包裝一些展開的內容時，我有點掙扎。代碼如下所示：從一個元素到另一個元素的jQuery包裝

<div class="wrap"> 
<div class="A1">some content</div> 
<div class="A2">some content</div> 
Unwrapped text 
<div class="A3">some content</div> 

<div class="B1">some content</div> 
<div class="B2">some content</div> 
Unwrapped text 
<div class="B3">some content</div> 
</div>

正如你看到的，我想要做的是所有A元素包裝成一個格，也包括在之間展開的文本。然後，與B元素一樣。有任何想法嗎？

來源

2016-01-29 Codedrop Team

後@ j08691沒有嘗試更多的東西比使用.before（） - 方法＆.append（）在某些點添加打開和關閉div，但這些也會自動添加結束標記，這使得它不可能。 –

*「然後，對B元素做同樣的事情」*，soooo，你想將展開的文本兩次包裝起來，或者它應該如何工作？ – adeneo

您發佈的代碼是唯一條件還是元素的數量和位置可能發生變化？ – j08691

-1

這將工作：

var split = function() { 
 
    var arr = ['A', 'B']; 
 
    for (var i in arr) { 
 
    var ch = arr[i]; 
 
    $("<div class='" + ch + "'>").insertBefore("div[class*='" + ch + "']:first"); 
 
    $("<div class='" + ch + "'>").insertAfter("div[class*='" + ch + "']:last"); 
 
    } 
 
}

.A, 
 
.B { 
 
    border: 1px black solid; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrap"> 
 
    <div class="A1">some content</div> 
 
    <div class="A2">some content</div> 
 
    Unwrapped text 
 
    <div class="A3">some content</div> 
 

 
    <div class="B1">some content</div> 
 
    <div class="B2">some content</div> 
 
    Unwrapped text 
 
    <div class="B3">some content</div> 
 
</div> 
 
<button onclick="split()">Split Divs</button>

來源

2016-01-29 21:01:38

yup，這可能是一個更好的解決方案，組和包裝..問候.. +1 – ameenulla0007

感謝您的代碼，但是，但是，您的代碼顯示了一個完美的例子，其中有一個模式（A或B）。我使用這些參考資料只是爲了更輕鬆地解釋我試圖實現的目標。我的鬥爭是我沒有這樣的模式，類是完全不同的，沒有邏輯結構。你有像例如對於parent-div（.wrap）的每個5個節點，首先寫入開放div，最後寫入開放div？ –

不，這會在類組之前和之後插入空白div，但實際上並未包裝它們。 – j08691

這是一個有點複雜纏繞其間的元素textnodes，所以要做的第一件事，就是包裝，跨度那些textnodes

var wrap = $('.wrap'), 
    html = wrap.contents(); 

html.filter(function(i, el) { 
    if (el.nodeType === 3 && el.nodeValue && el.nodeValue.trim().length) 
     $(el).wrap('<span class="wrapped_in" />'); 
});

然後這只是一個反過來反覆對孩子們的問題，並把它們包起來

wrap.children().toArray().reverse().forEach(function(elem) { 
    if ($(elem).closest('.wrapped').length > 0 || $(elem).hasClass('wrapped_in')) 
     return false; 

    var char = (elem.className || "_").charAt(0); 

    var elem = $('[class^="'+char+'"]'); 
    $(elem.add(elem.prev('.wrapped_in'))).wrapAll('<div class="wrapped wrap_'+(++i)+'" />') 
});

FIDDLE

如果由於某種原因你不想裹着跨度的textnodes，只是解開他們所有的其他包裝完成

$('.wrapped_in').contents().unwrap()

來源

2016-01-29 21:39:49 adeneo

你爲什麼使用反向？ –

@jackblank - 迭代....反向！顯然是 – adeneo

。我的意思是你爲什麼要反向迭代，而不是保持原樣。我只是在測試中刪除了反轉部分，看起來它沒有什麼區別（它仍然正確包裝）。感謝您的代碼。 –

從一個元素到另一個元素的jQuery包裝

回答

相關問題