Find Master and Slave
by Ryan Perez
HTML
<div width="100" height="500">
</div>
<div width="50" height="50">
</div>
<div width="50" height="50">
</div>
<div width="50" height="50">
</div>
CSS
div {background-color: red; padding: 20px; margin: 20px}
JavaScript
//select div with max height
//add a ".master" class to max div
//add ".content" to all divs X
//add ".slave" to all divs except max div
function addMasterSlave(selector,contentClass, masterClass, slaveClass) {
var orderList = []
$(selector).each(function(i,o){
$(o).addClass(contentClass);
$(o).addClass(slaveClass);
orderList.push(o);
})
console.log(orderList);
orderList.sort(function (a,b) {
console.log('b.height', $(b).height());
console.log('a.height', $(a).height());
return ($(b).height()) > ($(a).height()) ? 1 : -1;
});
orderList.forEach(function(o,i){
console.log($(o).height());
})
$(orderList[0]).addClass(masterClass).removeClass(slaveClass)
}
addMasterSlave('div', 'content', 'master', 'slave');