How to join two jQuery element objects? .add() isn't working

Question

I'm inside a function and I need to return a jQuery object with two elements. Inside the function I have, for example:

function getInput() {
    $hiddenInput = $('<input type="hidden">');
    //(other code)
    $select = $('<select></select>');
    //(other code)
    $hiddenInput.add($select);
    return $hiddenInput;
}

And outside I have:

$myContainer.append(getInput());

The result expected would be:

<div id="container"><input type="hidden"><select></select></div>

But the only thing I get right now with .add() is only the input element and not the select. How can I joint those two form elements on the function return? If not possible with jQuery, then with plain JavaScript. Thanks a lot.

Tim Stone · Accepted Answer · 2010-08-26 17:55:03Z

55

add() creates (and returns) a new jQuery object that is the union of the original set and what you're adding to it, but you're still returning the original in your function. You seem to have wanted to do this instead:

function getInput() {
    $hiddenInput = $('<input type="hidden">');
    //(other code)
    $select = $('<select></select>');
    //(other code)
    return $hiddenInput.add($select);
}

answered Aug 26, 2010 at 17:55

Tim Stone

19.2k6 gold badges58 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Alejandro García Iglesias Over a year ago

Oh my, that's in the docs. I had not read well. Thanks a lot!

Nikolay Lapitskiy Over a year ago

Jquery documentation says the sort order is undefined in this case.

chharvey Over a year ago

in short, we say .add() is non-destructive

Jeff Rupert · Accepted Answer · 2010-08-26 17:48:22Z

5

You can use

$hiddenInput.after($select);

That will put the $select after the $hiddenInput, achieving what you want to get.

answered Aug 26, 2010 at 17:48

Jeff Rupert

4,8602 gold badges23 silver badges17 bronze badges

4 Comments

js1568 Over a year ago

Conversely you could use: $select.insertAfter($hiddenInput);

Alejandro García Iglesias Over a year ago

That didn't worked either. I only get the input element without the select, like with add().

Alejandro García Iglesias Over a year ago

It may be that none of the elements is in the DOM yet?

Jeff Rupert Over a year ago

You're still returning $hiddenInput afterwards, yes?

Mohammad Dayyan · Accepted Answer · 2015-11-21 13:51:27Z

2

You can use the following:

this.MergejQueryObjects = function(arrayOfJqueryObjects) {
        return $($.map(arrayOfJqueryObjects, function (el) {
            return el.get();
        }));
    }

answered Nov 21, 2015 at 13:51

Mohammad Dayyan

22.5k44 gold badges174 silver badges242 bronze badges

Collectives™ on Stack Overflow

How to join two jQuery element objects? .add() isn't working

3 Answers 3

3 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related