7

jQuery を使用してクラス要素のセットを a にラップしたいのですがdiv、解決策が見つかりません。

HTML:

<div class="view-content">

  <div class="first">content</div>
  <div class="first">content</div>
  <div class="second">content</div>
  <div class="third">content</div>
  <div class="third">content</div>

</div>

望ましい結果:

<div class="view-content">

  <div class="column">
    <div class="first">content</div>
    <div class="first">content</div>
  </div>

  <div class="column">
    <div class="second">content</div>
  </div>

  <div class="column">
    <div class="third">content</div>
    <div class="third">content</div>
  </div>

</div>

4

5 に答える 5

9

デモ http://jsfiddle.net/kQz4Z/8/

API: http://api.jquery.com/wrapAll/

ここで違いを確認できるように改行を追加しました:) http://jsfiddle.net/kQz4Z/10/

コード

$(function() {

    $('.first').wrapAll('<div class="column" />')

    $('.second').wrapAll('<div class="column" />')

    $('.third').wrapAll('<div class="column" />')




    alert($('.view-content').html());
});​
于 2012-06-05T11:26:38.030 に答える
3

wrapAll() メソッドを使用する

$(function(){
    var classes = ['.first', '.second', '.third'];

    for (i = 0; i < classes.length; i++) {
        $(classes[i]).wrapAll('<div class="column">');
    }​

});

デモ: http://jsfiddle.net/g9G85/

于 2012-06-05T11:31:29.863 に答える
2

または、非常に短い動的ソリューションは次のとおりです。

​$(".view-content > div").each(function() {
    $(".view-content > ." + this.className).wrapAll("<div class='column' />");
});​

デモ: http://jsfiddle.net/CqzWy/

于 2012-06-05T11:45:12.700 に答える
1

を使用.wrap()して何かをラップすることはできますdivが、コンテンツが順序付けられていないと混乱します。以下に例を示します。

入力

<div class="view-content">
    <div class="first">content</div>
    <div class="second">content</div>
    <div class="first">content</div>
</div>

出力

<div class="view-content">
    <div class="column">
        <div class="first">content</div>
        <div class="column">
            <div class="second">content</div>
        </div>
        <div class="first">content</div>
    </div>
</div>
于 2012-06-05T11:25:36.950 に答える
0

これを試すことができます：

var arr = $(".view-content div").map(function() { return $(this).attr('class'); }).get();
var results = $.unique(arr);
var i;

for(i = 0; i < results.length; i++){

    $('.out').append('<div class="columns"></div>');
    $('.'+results[i]).clone().appendTo('.columns:last');
}

alert($('.out').html());

ここに例があります：

JSFIDDLE

于 2012-06-05T13:02:26.200 に答える