JavaScript在循环时更改for循环条件（无JQuery）

Question

I have a code that looks kinda like this.

And what i want to achive is to change the for loop codition if the div that is checked has child divs.

var condition = divs.querySelectorAll('div');
for(i = 0; i < condition.length; i++){
    if(condition[i].querySelectorAll('div').length > 0){
         condition = condition[i].querySelectorAll('div');
         i = 0;
    }else{
         // Last div reached.
         break;
    }
}

Does anyone out there know how to achive this effect. Do i have to use an other type of loop?

EDIT:

Since it seems i was wrong about what code was wrong, i now post my messy piece of code:

var posX = e.clientX;
var posY = e.clientY;
function mouseDown(e){
    var getChildDivs = this.querySelectorAll('div');

    if(getChildDivs.length > 0){
        var offsetDivLeft = 0;
        var offsetDivTop = 0;
        for(i = 0; i < getChildDivs.length; i++){
            if(posX >= getChildDivs[i].offsetLeft && posX <= getChildDivs[i].offsetLeft + Math.floor(getChildDivs[i].style.width.slice(0, -2)) &&
                posY >= getChildDivs[i].offsetTop && posY <= getChildDivs[i].offsetTop + Math.floor(getChildDivs[i].style.height.slice(0, -2))){
                if(getChildDivs[i].querySelectorAll('div').length > 0){
                    offsetDivLeft = offsetDivLeft + getChildDivs[i].offsetLeft;
                    offsetDivTop = offsetDivTop + getChildDivs[i].offsetTop;
                    getChildDivs = getChildDivs[i].querySelectorAll('div');
                    curDiv = getChildDivs[i];
                    i = 0;
                }else{
                    curDiv = getChildDivs[i];
                    break;
                }
            }
        }
}
}

Answer 1

i created a fiddle which loops over every child element and children of children as well:

http://jsfiddle.net/czzeaz3x/

var condition = divs.querySelectorAll('div');
for(i = 0; i < condition.length; i++){
if(condition[i].children.length > 0){
     condition = condition[i].querySelectorAll('div');
    alert(condition);
     i = 0;
}else{
     // Last div reached.
     break;
}
}

i hope it helps ;)

Answer 2

The correct solution is

function mouseDown(e){
  curdiv = e.target;
}

The target property of the event gives you the actual div which was clicked--normally the frontmost one, which is also normally the most deeply nested one. From MDN :

A reference to the object that dispatched the event.