Jquery 将HTML附加到父级中的第一个空div

Jquery 将HTML附加到父级中的第一个空div,jquery,html,Jquery,Html,我在这里搜索了一段时间,但找不到与此相关的任何内容。我拥有的是父div中的一组div。当用户单击比较复选框时,我希望将包含数据缩略图的HTML附加到第一个空div。因此,如果用户单击三个要比较的内容,第一个将进入div1,第二个进入div2,依此类推。我希望在JQuery中实现这一点 以下是我所拥有的: <div id="my_cars_compare" class="my_cars_expanded" style="height: 45px;"> <span class

我在这里搜索了一段时间,但找不到与此相关的任何内容。我拥有的是父div中的一组div。当用户单击比较复选框时,我希望将包含数据缩略图的HTML附加到第一个空div。因此,如果用户单击三个要比较的内容,第一个将进入div1,第二个进入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>

我的车增加了X辆车

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>');   
};

});
});
$(文档).ready(函数()
{
$('.compare_click')。单击(函数(){
var dataThumbnail=$(this.parent('td').find('img.clicked').attr('data-thumbnail');
var my_cars_count=$('.my_cars_expanded')。children('div')。长度;
对于(我的车数>=6){
$('.my\u cars\u expanded').find('div:empty').append('');
};
});
});

您可以使用
: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('...');   
};

这是我在这里看到的最详细的标题
$(this.parent('td')
。。我甚至看不到任何地方,更不用说img了…在哪里。比较一下?请发布所有相关代码抱歉,我从100多辆车的列表中获取td,这与页面下方的表格完全不同。这就是我检索图像缩略图的方式