I have been searching on here for awhile but cannot find anything in regards to this. What I have is a set of divs within a parent div. When the user clicks a compare checkbox I want to append the HTML that contains the data-thumbnail to the first empty div. So if the user clicks three things to compare, the first would go into div1, the second into div2 and so on. I am looking to do this in JQuery.
Below is what I have:
<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>');
};
});
});
You can use the :first
selector, div:empty
selects all the empty div tags:
$('.my_cars_expanded').find('div:empty:first').append('...');
The syntax of your for
loop is like the if
statement, I think you want to use an if
statement.
var my_cars_count = $('.my_cars_expanded').find('div:empty').length;
if ( my_cars_count > 0 ) {
$('.my_cars_expanded').find('div:empty:first').append('...');
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With