2

同じ属性を持つ div をグループ化し、それらをコンテナー div に入れようとしています。div が生成されます。構造はこんな感じ。

<div class="cleanse">A</div>
        <div class="treat">B</div>
        <div class="prime">C</div>

        <br><br><br>
        <div class="product"><img alt="red" src="http://aar.co/508-859-thickbox/therapy-ball-small-red.jpg" width="100px"></div>
        <div class="product"><img alt="blue" src="http://www.valleyvet.com/swatches/11178_L_230_vvs.jpg" width="100px"></div>
        <div class="product"><img alt="red" src="http://aar.co/508-859-thickbox/therapy-ball-small-red.jpg" width="100px"></div>
        <div class="product"><img alt="yellow" src="http://debenhams.scene7.com/is/image/Debenhams/304028400423?$ProdLarge$" width="100px"></div>
        <div class="product"><img alt="blue" src="http://www.valleyvet.com/swatches/11178_L_230_vvs.jpg" width="100px"></div>

そして、私がこれまでに持っていて機能していないスクリプトは

$(function(){
        $('.product').each(function(){
            if ($(this).is('[red]')) {
                $(this).appendTo($('.cleanse'));
            } else {
                 if ($(this).is('[blue]')) {
                        $(this).appendTo($('.treat'));
                 } else {
                      if ($(this).is('[yellow]')) {
                        $(this).appendTo($('.prime'));  
                      }
                 }
            }
            }
    });
4

4 に答える 4

7

hasフィルタを使用します。

$(function() {
    var $products = $('.product');

    $products.filter(':has([alt=red])').appendTo('.cleanse');
    $products.filter(':has([alt=blue])').appendTo('.treat');
    $products.filter(':has([alt=yellow])').appendTo('.prime');
});

これがフィドルです：http：//jsfiddle.net/qxRY4/1/

より大きなデータセットを扱っている場合は、代わりにループを使用することをお勧めします。方法は次のとおりです。

$(function() {
    var $products = $('.product');
    var map = {
        red: 'cleanse',
        blue: 'treat',
        yellow: 'prime'
    };

    $.each(map, function (attr, className) {
        $products.filter(':has([alt=' + attr + '])').appendTo('.' + className);
    });
});

これがフィドルです：http：//jsfiddle.net/qxRY4/2/

于 2013-01-10T02:39:28.253 に答える
0

try this:

$(function(){
    var colorMap = {red: "cleanse", blue: "treat", yellow: "prime"};
    $('.product > img').each(function(){
        var el = $(this);
        el.appendTo($('.' + colorMap[el.attr('alt')]));
    });    
});
于 2013-01-10T02:41:11.100 に答える
0

http://jsfiddle.net/y9CS7/2/

$(function() {
    var $prod = $('.product');

    $prod.find('[alt="red"]').appendTo($('.cleanse'));
    $prod.find('[alt="blue"]').appendTo($('.treat'));
    $prod.find('[alt="yellow"]').appendTo($('.prime'));
});

This will move the parent <div>

$(function() {
    var $prod = $('.product');

    $prod.find('[alt="red"]').parent().appendTo($('.cleanse'));
    $prod.find('[alt="blue"]').parent().appendTo($('.treat'));
    $prod.find('[alt="yellow"]').parent().appendTo($('.prime'));
});
于 2013-01-10T02:41:22.830 に答える
0

反復を継続したい場合は.product、最初にimgタグを選択する必要があります。これは、alt付きの画像タグではなくdivになるため、これだけではありません。

$(function(){
        $('.product').each(function(){
            if ($("img",this).is('[alt="red"]')) {
                $(this).appendTo('.cleanse');
            } else {
                 if ($("img",this).is('[alt="blue"]')) {
                        $(this).appendTo('.treat');
                 } else {
                      if ($("img",this).is('[alt="yellow"]')) {
                        $(this).appendTo('.prime');  
                      }
                 }
            }
        }
});
于 2013-01-10T02:44:11.417 に答える