how iterate between divs jquery

i have doubt about how can i iterate into a group of div, my problem it's that i have this selector

$('.imagePanel')

this selector give a group of div that belong's to that class. Also i know that with the method length i can know how divs are. the problem it's that i wanna know if i can storage in a array each div to know what's it's the div which it's clicking by the user in other words to this

$(".imagePanel").click(setElement);

function setElement() {

for (var i = 0; i < $('.imagePanel').length; i++) {

    //validate in the loop if it's in the div that click the user
    if (this.id == $("#"i).id) {

        if (!$(this).data('selected')) {
            $(this).css('border', '2px solid black').data('selected', true);
        }
        else {
            $(this).stop(true, true).data('selected', false);
        }
    }

}
}

edit

To be more specific, in the group of div i need that only one have th开发者_StackOverflowe style, if you click in one an then in other, the last div that you make the click it's the one with the style the other div's need's to clear the style

don't want this

this will get the element upon which you are clicking:

$(".imagePanel").click(function(){
    var $this = $(this); //<--good practice: cache
    if (!$this.data('selected')) {
        $this.css('border', '2px solid black').data('selected', true);
    } else {
        $this.stop(true, true).data('selected', false);
    }
});

You could refactor the above for even greater brevity:

$(".imagePanel").click(function(){
    var $this = $(this); //<--good practice: cache
    $this.data('selected')? $this.stop(true, true).data('selected', false) :
                            $this.css('border', '2px solid black').data('selected', true);
});

If you wanted to iterate over the collection for some other reason, then jQuery each() would be what you would need.

$(".imagePanel").each(function(){
    //do something
});

It is not necessary for you in this circumstance, however.

To answer the updated question (see comment thread on question), you do not need to iterate through all the divs.

Just bind a function to click which adds your desired css class to $(this) (the clicked element).

One way ensure that only one item is selected would be to keep a cache of the currently selected element and remove the associated class from it when something else is clicked.

Example:

var selected_xyz = null; 
$('.xyz').click(function() {
    t = $(this);
    if (selected_xyz != t) {
        if (selected_xyz != null) {
           selected_xyz.removeClass("selected");   
        }
        t.addClass("selected");
        selected_xyz = t;
    }
});

Demo: http://jsfiddle.net/LS4JV/1/

$(".imagePanel").click(function(){
    if(!$(this).data('selected')){
        $(this).css('border', '2px solid black').data('selected', true);
    }else{
         $(this).stop(true, true).data('selected', false);
    }
});

Check out:

http://api.jquery.com/each/