8

ここでしばらく検索していますが、これに関しては何も見つかりません。私が持っているのは、親 div 内の一連の div です。ユーザーが比較チェックボックスをクリックすると、データサムネイルを含む HTML を最初の空の div に追加します。したがって、ユーザーが 3 つのものをクリックして比較すると、最初のものは div1 に移動し、2 番目は div2 に移動するというようになります。私はこれをJQueryでやろうとしています。

以下は私が持っているものです：

<div id="my_cars_compare" class="my_cars_expanded" style="height: 45px;">   
<span class="my_cars_heading">
    X cars added to My Cars <span class="expand_it">Expand</span>
</span>
    <div id="my_cars_1" class="my_cars_empty first"></div>
    <div id="my_cars_2" class="my_cars_empty"></div>
    <div id="my_cars_3" class="my_cars_empty"></div>
    <div id="my_cars_4" class="my_cars_empty"></div>
    <div id="my_cars_5" class="my_cars_empty"></div>
    <div id="my_cars_6" class="my_cars_empty"></div>
    <input type="submit" value="Compare" class="btn_compare" />
    <br clear="all" />
</div>

JQuery:

$(document).ready(function()
{
$('.compare_click').click(function() {
var dataThumbnail = $(this).parent('td').find('img.clicked').attr('data-thumbnail');

var my_cars_count = $('.my_cars_expanded').children('div').length;

for ( my_cars_count >= 6 ) {


    $('.my_cars_expanded').find('div:empty').append('<div class="my_cars_details" style="position: relative;"><div class="my_cars_delete"><img src="btn_mycars_close_overlay.png" /></div><div class="my_cars_photo"><img src="'+dataThumbnail+'" width="67px" /></div></div>');   
};

});
});
4

1 に答える 1

10

:firstセレクターを使用して、div:emptyすべての空の div タグを選択できます。

$('.my_cars_expanded').find('div:empty:first').append('...');

forループの構文はifステートメントのようなものです。ステートメントを使用したいと思いますif。

var my_cars_count = $('.my_cars_expanded').find('div:empty').length;
if ( my_cars_count > 0 ) {
     $('.my_cars_expanded').find('div:empty:first').append('...');   
};
于 2012-08-14T21:08:16.570 に答える