# Refactoring 3 level depth for loops in JavaScript

I'm trying to get rid of some of the horrible nested loops in the following code. Essentially is moving TDs to top rows based on whether the current row has the current cell. You can see the execution here: http://jsfiddle.net/Jq8sk/

How can I clean it up and avoid this level of depth. Any help is appreciated.

var trs = $('.trs'); var arr = ['n0', 'n1', 'n2']; for (var i = 0; i < trs.length; i++) { for (var j = 0; j < arr.length; j++) { var tds = trs[i].getElementsByClassName('tds ' + arr[j]); if (tds.length == 0) { for (var x = i + 1; x < trs.length; x++) { var tds_offset = trs[x].getElementsByClassName('tds ' + arr[j]); if (tds_offset.length > 0) { trs[i].appendChild(tds_offset[0]); break; } } } } }  • Out of curiosity, if you're using jquery, why only use it on the first line? Feb 24 '12 at 21:32 • the whole application uses jquery, but in that part of the code, only the first line... Feb 24 '12 at 21:44 ## 2 Answers This may not actually be any better as far as performance goes, but I believe it is equivalent to your code (and possibly more readable?). http://jsfiddle.net/Jq8sk/1/ var arr = ['n0', 'n1', 'n2'];$('.trs').each(function(){
var $row =$(this);

for(var i=0;i<arr.length;i++){

if($row.children(".tds." + arr[i]).length === 0){ // td doesn't exist, see if any later rows have it var$tds = $row.nextAll(".trs").children(".tds." + arr[i]); if($tds.length > 0){
$row.append($tds[0]);
}
}
}
});


Consider this:

$( '.trs' ).each( function ( i, row ) {$.each( arr, function ( i, className ) {
if ( !$( row ).children().hasClass( className) ) {$( row ).nextAll().children( '.' + className+ ':first' ).appendTo( row );
}
});
});


Live demo: http://jsfiddle.net/FUdpE/1/