DEV Community

Nick Ciolpan for Graffino

Posted on

You can write better jQuery

While almost every new article mentioning it, talks about its demise, I’ve decided to write as about one of the most recurrent jQuery bad practices I came across and how to deal with it. Here it is:

Going from this:


$('.multiSelectOne').multiselect({
    buttonClass: 'btn btn-default',
    buttonWidth: '100%',
    ...
});
$('.multiSelectTwo').multiselect({
    buttonClass: 'btn btn-default',
    buttonWidth: '100%',
    nonSelectedText: '---',
    ...
});

To This:

<select class="js-multiselect" 
    data-include-select-all-option="true" 
    data-all-selected-text="All">
    <option></option>
</select>

$('.js-multi-select).each(function () {
    let options = {};

    Object.entries($(this).data())
        .map(property => options[property[0]] = property[1]);

  $(this).multiselect(options);

}

And never go back for adjustments in the script file ever again.

Top comments (0)