Manage last row items
Adjuting margin-bottom of last-row items that :last-of-type can't address.
HTML
<form class="last_row_management" data-item_selector="fieldset">
<fieldset>
<input type="text" value="one" />
</fieldset>
<fieldset>
<input type="checkbox" />two
</fieldset>
<fieldset>
<input type="checkbox" />three
</fieldset>
<fieldset>
<input type="button" value="four" />
</fieldset>
<fieldset>
<input type="checkbox" />five
</fieldset>
<fieldset>
<input type="text" value="six" />
</fieldset>
<fieldset>
<input type="button" value="seven" />
</fieldset>
<fieldset>
<input type="button" value="eight" />
</fieldset>
</form>
<div class="clear"></div>
<ul class="last_row_management" data-item_selector="li">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
<li>seven</li>
<li>eight</li>
<li>nine</li>
<li>ten</li>
<li>eleven</li>
<li>twelve</li>
</ul>
CSS
/* ------------- necessary ------------------ */
.last_row_item {
background-color: turquoise;
margin-bottom: 0 !important;
}
/* ------------- just for this fiddle ------------- */
body {
font-family: 'Tahoma';
}
.clear {
clear: both;
border-bottom: 1px solid black;
}
fieldset {
display: inline-block;
float: left;
height: 30px;
margin-right: 20px;
margin-bottom: 50px;
}
ul {
list-style-type: none;
margin: 40px 0 0;
padding: 0;
}
li {
width: 100px;
height: 100px;
float: left;
margin-bottom: 50px;
margin-right: 30px;
border: 1px solid black;
}
JavaScript
// tries to adjust margin-bottom of last-row elements.
function manage_last_row_items(){
$('.last_row_management').each(function(){
var
$context = $(this),
item_selector = $context.data('item_selector'),
$last_item = $context.find(item_selector +':last-of-type').addClass('last_row_item'),
final_top = $last_item.offset() ? $last_item.offset().top : 0
;
$context.find(item_selector)
.not($last_item)
.removeClass('last_row_item')
.filter(function(){
var
o = $(this).offset(),
decision = false
;
if (o) {
decision = o.top === final_top;
}
return decision;
})
.addClass('last_row_item')
;
}); // end of ( each )
}
$(document).ready(function(){
manage_last_row_items();
$(window).resize(manage_last_row_items);
});