jquery包装相邻元素组

Posted 2023-05-09

【中文标题】jquery包装相邻元素组

【英文标题】：jquery wrapping groups of adjacent elements

【发布时间】：2013-03-04 01:49:08

【问题描述】：

我有一个允许用户在页面上插入内容块的 cms。用户可以使用不同类型的内容块，并且可以按任何顺序插入它们。一个高级 dom 结构示例可能如下所示：

<p>Some rich text</p>

<div class="box">...</div>
<div class="box">...</div>
<div class="box">...</div>

<h3>Some  more rich text</h3>
<p>Lorem ipsum</p>

<div class="box">...</div>
<div class="box">...</div>

我想要做的是将任何相邻的“盒子”div 包装在一个包装“容器”div 中。因此，在上面的示例中，将插入两个“容器”div，因为有两组盒子 div，结果是：

<p>Some rich text</p>

<div class="container">
    <div class="box">...</div>
    <div class="box">...</div>
    <div class="box">...</div>
</div>

<h3>Some  more rich text</h3>
<p>Lorem ipsum</p>

<div class="container">
    <div class="box">...</div>
    <div class="box">...</div>
</div>

我不认为有一个聪明的方法可以用 css 选择器来做这件事，那么有谁知道用 jQuery 来做这件事吗？

【问题讨论】：

发布想要的结果。你有没有尝试过？

【参考方案1】：

你可以使用

.nextUntil，获取所有下一个.box。 .andSelf 将当前元素添加到集合中 .wrapAll 将每个集合包装到不同的 .container

$('.box').not('.box+.box').each(function()
  $(this).nextUntil(':not(.box)').addBack().wrapAll('<div class="container" />');
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Some rich text</p>

<div class="box">...</div>
<div class="box">...</div>
<div class="box">...</div>

<h3>Some  more rich text</h3>
<p>Lorem ipsum</p>

<div class="box">...</div>
<div class="box">...</div>

http://jsbin.com/gonino/edit?html,js

【讨论】：

完美，但不推荐使用andSelf()。现在是addBack。使用cheerio（Node 的jQuery 克隆）遇到了这个问题。

...它也没有wrapAll，所以也许这对我来说根本不起作用。 :( :P

谢谢。我试图替换为.addBack()，它似乎工作正常。不是吗？

【参考方案2】：

好吧，你可以这样做 JSFiddle example 我刚刚振作起来。

这基本上循环遍历每个.box，将其添加到数组中并确定下一个元素是否也具有.box 类：

var collection = [];
$('.box').each(function() 
    var nextBox = $(this).next().hasClass('box');
    ...
    collection.push($(this));
)

如果下一个元素没有有一个.box 类，它会创建包含分隔符，将其放置在collection 数组中的第一个.box 之前的页面上，然后使用appendTo 将所有.box 分隔符移入其中：

    if(!nextBox)
    
        var container = $('<div class="collection"></div>');
        container.insertBefore(collection[0]);
        for(i=0;i<collection.length;i++)
        
            collection[i].appendTo(container);
        
        collection = [];
    

【讨论】：

这在我看来是最强大的解决方案。

【参考方案3】：

小提琴在这里：http://jsfiddle.net/jdelight/XutA6/5/ 这是一个使用 css 的可能解决方案，它可以让您使用单一背景颜色和边框来设置块的样式。 HTML 应该是这样的：

    <div class="block">this is block 1</div>
    <div class="block">this is block 2</div>
    <div class="block">this is block 3</div>
    <div class="block">this is block 4</div>
    <div class="block">this is block 5</div>

CSS 将是：

            /* style all blocks with the required background colour and border */
        .block 
            background: #eee;
            color: #000;
            border: 1px solid red;
            border-bottom: 0;
            padding: 20px;
            width: 400px;
            border-radius: 20px;
            /* remove the rounded corners from he bottom left/right */
            border-bottom-left-radius:0;
            border-bottom-right-radius:0;
            position: relative;
        
        /* style all adjacent blocks and remove the radius - so the top block has a radius and the others don't */
        .block + .block 
            border-radius: 0;
            border-top: 0;
        

        /* create a cheeky block with content after which sits below all blocks */
        /* so it's hidden from all the blocks above it apart from the very bottom one (see bottom: -10px) */
        /* then style the rounded corners on that one */
        .block::after 
            content:'.';
            display: block;
            background: red;
            height: 10px;
            position: absolute;
            border-bottom: 1px solid red;
            border-left:  1px solid red;
            border-right:  1px solid red;
            bottom: -10px;
            width: 440px;
            background: #eee;
            left:-1px;
            border-bottom-left-radius:10px;
            border-bottom-right-radius:10px;
        

【讨论】：

让我的回答蒙羞！干得好！

这几乎就在那里，但我最终无法使用它，因为绝对定位意味着我遇到了与底部重叠内容的问题。