CODEWITHSUNDEEP
javascriptjquery
Rickstar
Rickstar

Reputation: 6199

Looping in jQuery

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?

Upvotes: 2

Views: 2755

Answers (5)

Espen Herseth Halvorsen
Espen Herseth Halvorsen

Reputation: 6275

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!');
   }
});

Upvotes: 0

Blair McMillan
Blair McMillan

Reputation: 5349

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>​

Upvotes: 4

MatTheCat
MatTheCat

Reputation: 18761

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)

Upvotes: 0

Mark Biek
Mark Biek

Reputation: 150889

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!');
        }
    });
});

Upvotes: 0

JasCav
JasCav

Reputation: 34652

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.

Upvotes: 0

Related Questions