如何包裝動態的內部 div？

Question

我一直在嘗試用外部 div 包裝一些 div，以便我可以設置它們的樣式。 但到目前為止我還不能這樣做。

我有這個list div，其中包含一些我需要包裝的內部 div。 那就是需要將具有相同字母的內部div捆綁在一起。 雖然用字母定位 div 不是一個好主意，因為它們將是動態的。

這是我一直在努力實現的一個例子：

<div class="list-wrapper">
    <div class="el">A</div>
    <div> 
       <a>A</a>
    </div>
</div>

<div class="list-wrapper">
    <div class="el">C</div>
    <div> 
       <a>C</a>
    </div>
    <div> 
       <a>C</a>
    </div>
</div>

另一個例子：

這是我到目前為止所嘗試的：

 $(list).find('div.el').each(function(idx, item) { $(item).nextAll('div').wrapAll('<div class="list-wrapper"></div>') });

 .wrapper { background-color: red; padding: 20px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="list"> <div class="el">A</div> <div> <a>A</a> </div> <div class="el">B</div> <div> <a>B</a> </div> <div class="el">C</div> <div> <a>C</a> </div> <div> <a>C</a> </div> <div class="el">D</div> <div> <a>D</a> </div> <div> <a>D</a> </div> <div> <a>D</a> </div> <div class="el">E</div> <div> <a>E</a> </div> </div>

Answer 1

為了實現您的目標，您可以在循環中使用nextUntil()的組合，以獲取每個.el和wrapAll()之間的 div 元素。 您可以在其中包含addBack()以將循環中的當前.el添加到要包裝的集合中。 嘗試這個：

 $('#list').find('.el').each((i, el) => { $(el).nextUntil('.el').addBack().wrapAll('<div class="list-wrapper"></div>') });

 .wrapper { background-color: red; padding: 20px; }.list-wrapper { border: 1px solid #C00; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="list"> <div class="el">A</div> <div><a>A</a></div> <div class="el">B</div> <div><a>B</a></div> <div class="el">C</div> <div><a>C</a></div> <div><a>C</a></div> <div class="el">D</div> <div><a>D</a></div> <div><a>D</a></div> <div><a>D</a></div> <div class="el">E</div> <div><a>E</a></div> </div>

請注意， $(list)僅通過代理工作，因為具有id屬性的元素可用作document上的屬性。 使用有效的字符串選擇器是更好的做法。