Get array of elements from event

Question

I have few nested DIV elements. For example:

<div id='id1'><div id='id2'>content</div></div>

I attach event to DIVs event handler using jQuery:

$('div').click(function () {
    //some code   
});

There will be two events when user click on content. So there will be two simultaneous events. Is it possible to get inside event handler array of objects (DIVs) what have click event?

May be it is possible using other framework but jQuery?

Answer 1

If you do this, then the outer handler won't fire when the inner div is clicked:

$('div').click(function () {
    //some code

    return false;  
});

If you want to get an array of ALL the divs being clicked on, use this:

$('div').click(function () {
    //some code
    var divs = $(this).parents('div'); //Gets all the divs which are ancestors

    return false; //Prevent event bubbling 
});

Answer 2

If you handler is like the question:

$('div').click(function () {
    //some code   
});

You can get the divs inside like this:

$('div').click(function () {
    $(this).find("div") //do something
});

Answer 3

If you literally want an array of the div objects that would get the click event, you could do:

$('div').click(function(e) {
    var array = $(e.target).parents('div').andSelf().get();
    alert(array);
    e.stopPropagation();;
});

Not sure if that's what you want, but array will contain an array of divs up the chain.