Question

I’m after some help with jquery. Can some one tell me the best way to optimise the use of the .draggable and .sizable used on many different, but similarly named, elements

for example

    $( "#elem1" ).draggable({

        many lines of code
    });

    $( "#elem2" ).draggable({

        many lines of code
    });

    $( "#elem3" ).draggable({

        many lines of code
    });

    $( "#elem4" ).draggable({

        many lines of code
    });

    ...

    $( "#elem1" ).resizable({

        many lines of code
    });

    $( "#elem2" ).resizable({

        many lines of code
    });

    $( "#elem3" ).resizable({

        many lines of code
    });

    $( "#elem4" ).resizable({

        many lines of code
    });

    ...

I’m sure there is a way to simply pass the number 1, 2, 3 etc to some multi-purpose code but I’m not sure how to do this since as far as I can see you have to do the elements individually. I’m sure someone will put me right on this.

Many thanks in advance.

Answer 1

If your code differs only by the strings referring to a specific elements Id, you could reduce your code duplication like this:

$("#elem1, #elem2, #elem3, #elem4").resizable({
  var id = $(this).attr('id'); //now you can use the ID without hard coding the string.
});

If all your resizable elements share a common class, you could clean this up even further:

$(".resizable-element").resizable({
  var id = $(this).attr('id'); //now you can use the ID without hard coding the string.
});

If you need to access the integer suffix specifically, you can store that value as a data attribute on the element itself:

<div id="elem1" data-idSuffix="1" class="resizable-element"></div>

To take our example one step further with the markup above:

$(".resizable-element").resizable({
   var id = $(this).attr('id');
   var idSuffix = $(this).data('idSuffix');
});