Looping in jQuery

Question

I am tring to loop loop a jQuery command 5 times. Here is my code:

 for(var i = 0; i < 5; i++) {
    $("#droppable_"+i).droppable({
       activeClass: 'ui-state-hover',
       hoverClass: 'ui-state-active',
       drop: function(event, ui) {
          $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
       }
    });
 } 

For some reason I can't get it to work. Can someone help me please?

Answer 1

$("#droppable").droppable({ 
   activeClass: 'ui-state-hover', 
   hoverClass: 'ui-state-active', 
   drop: function(event, ui) { 
      $(this).addClass('ui-state-highlight').find('p').html('Dropped!'); 
   } 
}); 

What is your expected result.

calling droppable 5 times?

for(var i = 0; i < 5; i++) { 
$("#droppable").droppable();
 } 

drop 5 p

for(var i = 0; i < 5; i++) { 
$("p").droppable();
 } 

or p have ids

for(var i = 0; i < 5; i++) { 
$("p"+i).droppable();
 } 

I dont know what you want :)

Answer 2

As the comments pointed out, you're not really doing anything useful in your loop. (There will only ever be one "droppable" item because you are using an ID.)

However, what I think you're going for is you want to do all that stuff to each item found by your selector. You could do something like this:

$('.select').each(function() {
  // Do your stuff here.
});

You should read up more on the each function to understand how it works.

Answer 3

It looks to me like you have 5 elements that you're trying to apply droppable to, each element with its own unique id.

Maybe you could put an isDroppable class on each element and then you don't need to loop your jQuery code, just do this:

$(".isDroppable").each( function(i,elem) {
    $(elem).droppable({
        activeClass: 'ui-state-hover',
        hoverClass: 'ui-state-active',
        drop: function(event, ui) {
            $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
        }
    });
});

Answer 4

I think you don't know JQuery can apply a function to a set of elements !

$('*[id^=droppable]').droppable({
       activeClass: 'ui-state-hover',
       hoverClass: 'ui-state-active',
       drop: function(event, ui) {
          $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
       }
    });

(The selector would be more effective with a class)

Answer 5

Your updated code works fine. Remember that you also need to set something as draggable.

Working example (using your loop) is http://jsfiddle.net/t56TE/

$("#draggable").draggable(); 
for(var i = 0; i < 5; i++) {
    $("#droppable_"+i).droppable({
       activeClass: 'ui-state-hover',
       hoverClass: 'ui-state-active',
       drop: function(event, ui) {
          $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
       }
    });
} ​

HTML:

<div id="draggable" class="ui-widget-content">
    <p>Drag me to my target</p>
</div>

<div id="droppable_1" class="ui-widget-header">
    <p>Drop here</p>
</div>
<div id="droppable_2" class="ui-widget-header">
    <p>Drop here</p>
</div>
<div id="droppable_3" class="ui-widget-header">
    <p>Drop here</p>
</div>
<div id="droppable_4" class="ui-widget-header">
    <p>Drop here</p>
</div>​

Answer 6

Why don't you just put all the ID's inside the selector?

I guess a loop would be ok if you plan to extend this further, but for now I would just stick with this:

$("#droppable_1, #droppable_2, #droppable_3, #droppable_4, #droppable_5").droppable({
   activeClass: 'ui-state-hover',
   hoverClass: 'ui-state-active',
   drop: function(event, ui) {
      $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
   }
});