jQuery不再循环遍历元素

Question

I have the following code:

for(counter = 0; counter < 2; counter++) {
    $form = $("<form></form>");
    $form.append($('.mandatory-form-input'));

    if(counter == 0) {
        $form.append($('.upload_box:lt(10)'));
    } else {
        var start_point = (counter * 10) - 1;
        $form.append($('.upload_box:gt('+ start_point +'):lt(10)'));
    }

    console.log($form.html());
}

The logic I want to implement is that it should create a form, add all the mandatory inputs and then add inputs on parts (based on css, lt , gt thing)...

But this is not working as expected, on first iteration, it works properly, but on second iteration it does not console logs anything. I am not sure why... (Atleast it should show the added mandatory-form-input fields that I am appending), but it is not even showing that.

I want to ask, is there something that I am missing in my code? (Like, a way to reset some $ reference or something?)

Note: I tried clearing the $form variable at the end of the loop, it still didn't work...

Answer 1

Since you are appending the same element $('.mandatory-form-input') , Then original element is removed from existing location and added to new $form object.

You can .clone() targeted element and then append them

Create a deep copy of the set of matched elements.

for(counter = 0; counter < 2; counter++) {
    $form = $("<form></form>");
    $form.append($('.mandatory-form-input').clone()); //Affected line

    ....
    console.log($form.html());
}