JQuery applying one piece of code to multiple elements

Question

Im trying to apply a piece of code to multiple divs :

 $('.elementResizable').resizable({
                    handles: {
                            'nw': '#nwgrip',
                            'sw': '#swgrip',
                            'se': '#segrip',
                            'e': '#egrip',
                            'n': '#ngrip',
                            's': '#sgrip',
                            'w': '#wgrip',
                    }
            });

This is the HTML :

<div class='elementResizable'  >
            <div class="moveHandle glyphicon glyphicon-move"  id="testMove"></div>
        <input class="test .editable" type="text" id="test" value="Full Name"></input>
        <div class="ui-resizable-handle ui-resizable-nw" style="display:none" id="nwgrip"></div>
        <div class="ui-resizable-handle ui-resizable-sw" style="display:none" id="swgrip"></div>
        <div class="ui-resizable-handle ui-resizable-se" style="display:none" id="segrip"></div>
        <div class="ui-resizable-handle ui-resizable-e" style="display:none" id="egrip"></div>
        <div class="ui-resizable-handle ui-resizable-n" style="display:none" id="ngrip"></div>
        <div class="ui-resizable-handle ui-resizable-s" style="display:none" id="sgrip"></div>
        <div class="ui-resizable-handle ui-resizable-w" style="display:none" id="wgrip"></div>

    </div>

    <div class='elementResizable'  >
            <div class="moveHandle glyphicon glyphicon-move"  id="testMove"></div>
        <input class="test .editable" type="text" id="test" value="Full Name"></input>
        <div class="ui-resizable-handle ui-resizable-nw" style="display:none" id="nwgrip"></div>
        <div class="ui-resizable-handle ui-resizable-sw" style="display:none" id="swgrip"></div>
        <div class="ui-resizable-handle ui-resizable-se" style="display:none" id="segrip"></div>
        <div class="ui-resizable-handle ui-resizable-e" style="display:none" id="egrip"></div>
        <div class="ui-resizable-handle ui-resizable-n" style="display:none" id="ngrip"></div>
        <div class="ui-resizable-handle ui-resizable-s" style="display:none" id="sgrip"></div>
        <div class="ui-resizable-handle ui-resizable-w" style="display:none" id="wgrip"></div>

    </div>

However the handles are only attaching to one of the elementResizables so i can only resize one, is there any way of attaching the handles to separate ones without having to use different names for the classes?

One thing you can try is to go through all of the elementResizables and apply the setting for them separately — MightyPork, Dec 16 '14 at 00:19

Alexis King · Accepted Answer · 2014-12-16T00:37:06.483

3

Use classes on the handles instead of ids—ids are unique! Replace the ids with classes, then change the selectors in the JavaScript to be .nwgrip, .swgrip, etc. Then restrict it to child elements by using .find and .each:

$('.elementResizable').each(function () {
    $(this).resizable({
        handles: {
            'nw': $(this).find('.nwgrip'),
            'sw': $(this).find('.swgrip'),
            'se': $(this).find('.segrip'),
            'e': $(this).find('.egrip'),
            'n': $(this).find('.ngrip'),
            's': $(this).find('.sgrip'),
            'w': $(this).find('.wgrip'),
        }
    });
});

edited Dec 16 '14 at 00:37

answered Dec 16 '14 at 00:19

Alexis King

43,109
15
131
205

I dont know how I didnt see that >.>, Ill give it a go! thanks. – Batzz Dec 16 '14 at 00:20
It nearly works :P it's assigned the handles properly however when i click on one it will just activate both =/ – Batzz Dec 16 '14 at 00:24
Maybe [this answer](http://stackoverflow.com/questions/4134768/jquery-resizable-only-works-on-first-element) will help. – zord Dec 16 '14 at 00:27
@Batzz That's amusing, haha. I figured jQuery would automatically restrict it to child elements. I updated my answer with a fix. – Alexis King Dec 16 '14 at 00:29
It still targets both of them for some reason =/ – Batzz Dec 16 '14 at 00:35
@Batzz Are you sure? I can't reproduce that behavior. Maybe you could make a JSFiddle? – Alexis King Dec 16 '14 at 00:38
@Batzz That fiddle doesn't have the right JS included so it doesn't work at all. :P It's using local paths. – Alexis King Dec 16 '14 at 00:42
http://jsfiddle.net/1ghybf8c/4/ the external css sheets arent necessary so dont worry about them. All the scripts are linked properly. – Batzz Dec 16 '14 at 00:53
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/66949/discussion-between-alexis-king-and-batzz). – Alexis King Dec 16 '14 at 00:55

score 0 · Answer 2 · answered Dec 16 '14 at 00:20

0

You've got multiple items there with the same id, which is not allowed in HTML. IDs should be unique. If you switch your id's to classes it may work for you.

I'm not very familiar with jQuery UI's resizable, but from the documentation it looks like you don't need to supply the handles?

answered Dec 16 '14 at 00:20

roryok

9,325
17
71
138

It only supplies the bottom right handle defaultlty. – Batzz Dec 16 '14 at 00:25

JQuery applying one piece of code to multiple elements

2 Answers2