如何将 div 包裹在多个相同的类元素周围

Posted

技术标签:

【中文标题】如何将 div 包裹在多个相同的类元素周围【英文标题】:How to wrap div around multiple of the same class elements 【发布时间】:2010-07-25 05:48:53 【问题描述】:

我正在尝试将多个相同类的 div 包装到一个 div 中,并跳过不属于同一类的 div。 .wrap 没有组合它们,并且 .wrapAll 将非分类的 div 扔到下面。我一直在尝试创建替代解决方案,但无济于事。

原文:

<div class="entry">Content</div>
<div class="entry">Content</div>
<div class="entry">Content</div>
<div>Skip in wrap</div>
<div class="entry">Content</div>
<div class="entry">Content</div>
<div class="entry">Content</div>

    continued...

想要的结果:

<div>
    <div class="entry">Content</div>
    <div class="entry">Content</div>
    <div class="entry">Content</div>
</div>
<div>Skip in wrap</div>
<div>
    <div class="entry">Content</div>
    <div class="entry">Content</div>
    <div class="entry">Content</div>
</div>

【问题讨论】:

与 meder 相同。您尝试使用的功能无法“猜测”您想要做什么,否则会有太多的开销并且会使该功能不切实际 我同意,不应使用 javascript 进行如此剧烈的更改。但是,我使用的软件不允许您编辑对设置的任何更改,所以我坚持使用 jQuery。 【参考方案1】:

您可以使用for 循环快速循环您的&lt;div&gt; 元素。在下面的代码中,只需在此处更改初始选择器以获取所有兄弟 div,例如#content &gt; div.entry 或无论他们在哪里:

var divs = $("div.entry");
for(var i=0; i<divs.length;) 
  i += divs.eq(i).nextUntil(':not(.entry)').andSelf().wrapAll('<div />').length;
​

You can give it a try here。我们只是循环,.entry&lt;div&gt; 元素使用.nextUntil() 来获取所有.entry 元素,直到有一个非.entry 使用:not() selector。然后我们将采用接下来的元素,加上我们开始使用的元素 (.andSelf()) 并在该组上执行 .wrapAll()。在它们被包装之后,我们将在循环中跳过这么多元素。

【讨论】:

【参考方案2】:

我刚刚创建了一个简单的custom solution。

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('<div class="wrap"/>').removeClass(wrap);

【讨论】:

【参考方案3】:

您也可以将新的 div 附加到您的标记中,然后将您想要包装的内容附加到其中。

如果你的标记是这样的:

<div class="wrap">
  <div class="col-1"></div>
  <div class="col-1"></div>
  <div class="col-1"></div>
  <div class="col-1"></div>
  <div class="col-1"></div>
  <div class="col-2"></div>
  <div class="col-2"></div>
  <div class="col-2"></div>
  <div class="col-2"></div>
  <div class="col-2"></div>
</div>

使用以下内容附加两个新 div(column-onecolumn-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('<div class="column-first group" /><div class="column-second ground" />');

// Append column content to new divs
$(colOne).appendTo('.column-first');
$(colTwo).appendTo('.column-second'); 

在这里演示:http://codepen.io/zgreen/pen/FKvLH

【讨论】:

以上是关于如何将 div 包裹在多个相同的类元素周围的主要内容,如果未能解决你的问题,请参考以下文章

如何仅使用 vanilla JavaScript 和 Node-API 将多个 div 元素包装在另一个元素节点周围?

如何使用jQuery在元素的内部文本的最后一个单词周围包裹一个范围?

使用 flexbox(无浮动)或其他任何东西将元素包裹在图像周围

HTML:元素周围的空白,如何删除?

我应该如何使用 jQuery 将多个相同的元素添加到 div

使用 jQuery 将元素包裹在 div 中