Refactoring 3 level depth for loops in JavaScript

Question

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

Answer 1

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

Answer 2

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/