jQuery concatenation of selectors without creating a new instance?

Question

Is is possible to concatenate two jQuery selectors without creating a new selector in the process? An example would be as follows:

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    </head>
    <body>
        <span class="a">A</span>
        <span class="a">B</span>
        <span class="b">C</span>
        <script language="JavaScript" type="text/javascript">
            <!--
                var a = $('.a');
                var b = $('.b');
                var c = a.add(b);

                console.log(a);
                console.log(b);
                console.log(c);
            //-->
        </script>
    </body>
</html>

Which yields the following selectors when written as above:

a = [ A, B ]
b = [ C ]
c = [ A, B, C ]

I would like to modify it to produce:

a = [ A, B, C ]
b = [ C ]
c = whatever

Without creating a new selector in the process, the equivalent of using an Array's "push" method on each element in the selector.

You can also redefine the variable without creating a new one: `a = a.add(b);` (don't add var to the beginning) Now `a` will be `[A,B,C]` but you lose its initial setting so you don't have a variable that just calls `[A,B]` — Syon, Mar 27 '13 at 15:22
I am aware you can redefine the variable. I am looking to concatenate the selectors without the overhead of creating a new instance of a selector. — CoryG, Mar 27 '13 at 15:35

score 2 · Answer 1 · answered Mar 27 '13 at 15:12

2

You can use multiple selectors in jQuery:

$('.a, .b')

The above selector will select all elements that have the class .a and/or .b

answered Mar 27 '13 at 15:12

97ldave

5,249
4
25
39

I'm trying to append to a selector derived from a separate function at different points in the execution of the page, that is not an option as the original selector statement is not known. – CoryG Mar 27 '13 at 15:30
do you mean like this: http://stackoverflow.com/questions/8493814/concatenate-selector-in-jquery – 97ldave Mar 27 '13 at 15:43
No, in the example I provided it would be appending the items (zero or more) in "b" into the selector "a" without creating a new instance of a selector (using the "a.add(b)" creates a new selector instance, it does not append to the existing instance contained in the variable "a"). – CoryG Mar 27 '13 at 15:48

score 1 · Answer 2 · answered Mar 27 '13 at 15:11

1

You can use multiple selectors in a jQuery string simply by comma-separating them, like so:

$('.a, .b')

answered Mar 27 '13 at 15:11

metadept

7,831
2
18
25

I'm trying to append to a selector derived from a separate function at different points in the execution of the page, that is not an option as the original selector statement is not known. – CoryG Mar 27 '13 at 15:30

score 1 · Accepted Answer · edited May 23 '17 at 10:32

1

You can use internal hack method push:

a.push.apply(a, b.get());  // it accepts only native DOM elements

But I wouldn't suggest you to use it, since it is not documented and provided for internal use only. Instead use simple: a = a.add(b).

REF: https://stackoverflow.com/a/14345461/1249581

edited May 23 '17 at 10:32

Community

1
1

answered Mar 27 '13 at 15:21

VisioN

143,310
32
282
281

Each selector may or may not contain more than 1 item. I am trying to find a method that doesn't involve writing a loop every time I want to do the join or creating a new selector instance with the overhead that implies (I asked specifically to get around the overhead of .add). – CoryG Mar 27 '13 at 15:34
1

@CoryG I still can't understand what do you want. `push()` method mutates the source jQuery object, exactly as you described. – VisioN Mar 27 '13 at 15:42
Yes, but not for all objects in the selector being appended, each selector can attain 0 or more objects. – CoryG Mar 27 '13 at 15:45
1

@CoryG Ah yeah, now I see. Look at my updated solution, it will append all elements from jQuery set. – VisioN Mar 27 '13 at 15:53
Is there any reason for the b.get() portion of this? Also, would there by a way to ensure there aren't duplicates other than .add or does jQuery not support this? I marked this as correct because it seems that jQuery probably doesn't support a localized version of .add and this is as good as it gets. – CoryG Mar 27 '13 at 16:04
1

`get()` returns DOM elements out of jQuery object, which is the only possible argument for `push()` here. To filter for duplicates you can use [`$.unique()`](http://api.jquery.com/jQuery.unique/) method, which is internally used by `add()`. – VisioN Mar 27 '13 at 16:08
It seems to work without using .get() - this is what I'm using and without digging into the jQuery code itself, it doesn't appear a new selector instance is being created anywhere: a.push.apply(a, b); $.unique(a); – CoryG Mar 27 '13 at 16:18

jQuery concatenation of selectors without creating a new instance?

3 Answers3

Linked