jQuery如何将div包装在同一个类元素的多个中
我试图将多个相同的类div包装成div并跳过不具有相同类的div。 .wrap不会将它们组合在一起，而.wrapAll会抛出下面的非类别div。 我一直在试图创建一个替代解决方案，但无济于事。
原版的
Content Content Content Skip in wrap Content Content Content continued... 想要的结果
Content Content Content Skip in wrap Content Content Content
您可以使用for循环快速遍历
元素。 在下面的代码中，只需在此处更改初始选择器以获取所有兄弟#content > div.entry div，例如#content > div.entry或它们位于何处：
var divs = $("div.entry"); for(var i=0; i 你可以在这里尝试一下 。 我们只是使用.nextUntil()循环遍历.entry
元素来获取所有.entry元素，直到有一个非.entry元素使用:not()选择器 。 然后我们将使用下一个元素，加上我们开始使用的元素（ .andSelf() ）并在该组上执行.wrapAll() 。 在他们被包裹之后，我们正在向前跳过循环中的许多元素。
我只是提出了一个简单的自定义解决方案 。
var i, wrap, wrap_number = 0; $('div').each(function(){ //group entries into blocks "entry_wrap_#" var div = $(this); if (div.is('.entry')) { wrap = 'entry_wrap_' + wrap_number; div.addClass(wrap); } else { wrap_number++; } }); for (i = 0; i <= wrap_number; i++) { //wrap all blocks and remove class wrap = 'entry_wrap_' + i; $('.' + wrap).wrapAll('').removeClass(wrap); }
您也可以将新div添加到标记中，然后将要包装的内容附加到其中。
如果你的标记是这样的：
使用以下命令追加两个新的div（第一column-one和第二column-two ），然后将适当的内容附加到这些div中：
// Set vars for column content var colOne = $('.col-1').nextUntil('.col-2').addBack(); var colTwo = $('.col-2').nextAll().addBack(); // Append new divs that will take the column content $('.wrap').append(''); // Append column content to new divs $(colOne).appendTo('.column-first'); $(colTwo).appendTo('.column-second');
在这里演示： http ： //codepen.io/zgreen/pen/FKvLH