6

ユーザーがコンテンツのブロックをページに挿入できるようにする 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 のグループが 2 つあるため、2 つの「コンテナ」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でこれを行う方法を知っている人はいますか?

4

3 に答える 3

5

使用できます

  1. .nextUntil、次のすべてを取得します.box。
  2. .andSelf現在の要素をコレクションに追加するには
  3. .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

于 2016-01-05T19:55:03.977 に答える
4

私が作成したばかりのこのJSFiddle の例のようにすることもできます。

これは基本的に、それを配列に追加するたびにループし.box、次の要素にも.boxクラスがあるかどうかを判断します。

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

次の要素にクラスがない場合は、.boxそれを含む仕切りを作成し、配列.box内の最初の要素が配置される前にそれをページに配置してから、 を使用してすべての仕切りをその中に移動します。collectionappendTo.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 = [];
    }
于 2013-03-15T11:37:35.247 に答える
2

フィドルはここにあります: 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;
        }
于 2013-03-15T11:47:46.093 に答える