Difference of the same code with and without for()

Question

I am mounting a jQuery code with dateTimePicker Bootstrap.

I’m tried a problem which is this: when I do it in a more extensive way it works perfectly, but when I try to do it in a more simplified, more dynamic way, it doesn’t work.

How is it working:

        $("#dt_in0").datetimepicker({ format: "DD/MM/YYYY", locale: "pt-br" });
        $("#dt_fim0").datetimepicker({ format: "DD/MM/YYYY", locale: "pt-br", useCurrent: false });

        $("#dt_in0").on("dp.change", function (e) {
            $("#dt_fim0").data("DateTimePicker").minDate(e.date);
        });
        $("#dt_fim0").on("dp.change", function (e) {
            $("#dt_in0").data("DateTimePicker").maxDate(e.date);
        });

        $("#hr_in0").datetimepicker({ format: "HH:mm", locale: "pt-br" });
        $("#hr_fim0").datetimepicker({ format: "HH:mm", locale: "pt-br" });

        $("#dt_in1").datetimepicker({ format: "DD/MM/YYYY", locale: "pt-br" });
        $("#dt_fim1").datetimepicker({ format: "DD/MM/YYYY", locale: "pt-br", useCurrent: false });

        $("#dt_in1").on("dp.change", function (e) {
            $("#dt_fim1").data("DateTimePicker").minDate(e.date);
        });
        $("#dt_fim1").on("dp.change", function (e) {
            $("#dt_in1").data("DateTimePicker").maxDate(e.date);
        });

        $("#hr_in1").datetimepicker({ format: "HH:mm", locale: "pt-br" });
        $("#hr_fim1").datetimepicker({ format: "HH:mm", locale: "pt-br" });

Dynamic way and that is not working properly:

    for (x = 0; x < 2; x++) {
            var di = ("#dt_in" + x).toString();
            var df = ("#dt_fim" + x).toString();
            var hi = ("#hr_in" + x).toString();
            var hf = ("#hr_fim" + x).toString();

            $(di).datetimepicker({ format: "DD/MM/YYYY", locale: "pt-br" });
            $(df).datetimepicker({ format: "DD/MM/YYYY", locale: "pt-br", useCurrent: false });

            $(di).on("dp.change", function (e) {
                $(df).data("DateTimePicker").minDate(e.date);
            });
            $(df).on("dp.change", function (e) {
                $(di).data("DateTimePicker").maxDate(e.date);
            });

            $(hi).datetimepicker({ format: "HH:mm", locale: "pt-br" });
            $(hf).datetimepicker({ format: "HH:mm", locale: "pt-br" });
    }

The problem I’m having is this change, that is not setting the maximum and minimum date correctly.

Is there any difference in my codes that could be causing this? For I am generating the same code, in a different and more dynamic way, but the result was to be the same.

Thanks for the help.

Answer 1

Use for with selectors in jQuery doesn’t make much sense because jQuery has the flexibility to access multiple or all elements of a collection, something pure Javascript doesn’t usually do. For example, if I want to apply display: none in all elements of the class .btn:

With jQuery:

$(".btn").hide();

With pure JS:

const btn = document.getElementsByClassName("btn");
for(let x=0; x < btn.length; x++){
   btn[x].style.display = "none";
}

With this, you can access all elements of your code using the appropriate selector, which can be numerous depending on the situation. In your case, I could take the id’s or otherwise depending on the structure of your HTML. But I’ll put an example by id, since they are almost equal, differentiating only by the number at the end:

$("[id^='dt_in']").datetimepicker({ format: "DD/MM/YYYY", locale: "pt-br" });
$("[id^='dt_fim']").datetimepicker({ format: "DD/MM/YYYY", locale: "pt-br", useCurrent: false });

$("[id^='dt_in']").on("dp.change", function () {
    $("#dt_fim"+this.id.replace(/[^\d]/g, '')).data("DateTimePicker").minDate(e.date);
});
$("[id^='dt_fim']").on("dp.change", function () {
    $("#dt_in"+this.id.replace(/[^\d]/g, '')).data("DateTimePicker").maxDate(e.date);
});

$("[id^='hr_in']").datetimepicker({ format: "HH:mm", locale: "pt-br" });
$("[id^='hr_fim']").datetimepicker({ format: "HH:mm", locale: "pt-br" });

For example, the selector [id^='dt_in'] will take all elements that have the id starting with dt_in, that is to say dt_in0, dt_in1, dt_in2 etc. The signs of ^= means that the attribute must start with the specified string, in this case, "dt_in".

In function of the event dp.change I used the selector:

"#dt_in"+this.id.replace(/[^\d]/g, '')

Means it will take the element that has the id #dt_in + the numeric part of the element that called the event. For example:

     elemento que chamou o evento
        ↓
$("[id^='dt_fim']").on("dp.change", function () {
    $("#dt_in"+this.id.replace(/[^\d]/g, '')).data("DateTimePicker").maxDate(e.date);
});

If the element that called the event has id dt_fim1, replace will remove anything that is not id number, that is, leaving only the number 1, with the regular expression:

/[^\d]/g

The [] means "character set". The sign ^ means that you will take everything that is not number, represented by \d, and the g (of global) means it will take all occurrences.

With this, if the element that called the event is #dt_fim1, the $("#dt_in"+this.id.replace(/[^\d]/g, '')) will be the same as $("#dt_in1").