jQuery combine multiple elements

Question

I was experimenting with jQuery and came across a question. Can I use an actual selector with existing element as a combined selector for jQuery?

So, suppose I've created a DIV element on-the-fly:

var $div = $('<div>')
               .css('position', 'absolute')
               .hide();    // Just to be short

$('body').append($div);

And I want to show it when user hovers over P elements / paragraphs (at the cursor position):

$('p').hover(function(e) {

    // Change the position of $div with regards of cursor position

    $div.show();
}, function(e) {
    $div.hide();
});

BUT also I want to apply this hover handlers to $div itself. So instead of duplicating my code, I want to do something like this:

$('p', $div).hover(...)

which will select $div element along with all P elements.

I know I can write functions separately and pass the names as arguments to hover function.

Is there any solution to this kind of situation in jQuery? or is there a more accurate solution?

have a look at .add() api.jquery.com/add -- something like $("p").add($div) should do the trick — xec
– xec, Commented Jun 2, 2014 at 12:32
Just FYI $('p', $div) will select p elements inside the $div. It is the same as $div.find('p');. It is not aggregating the two selectors. — Rory McCrossan
– Rory McCrossan, Commented Jun 2, 2014 at 12:33

damian · Accepted Answer · 2014-06-02 12:32:23Z

6

You could use the jQuery add method:

$('p').add($div).hover(function(e) { ...

answered Jun 2, 2014 at 12:32

damian

5,4845 gold badges38 silver badges64 bronze badges

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

2 Comments

Karlen Kishmiryan Over a year ago

Thank you. Didn't hear about that before.

noraj Over a year ago

add() is right when you have to combine only two elements, but what when you want to combine a lot? $('p').add($div).add($div).add($div).add($div).add($div).add($div) ... looks very dirty.

noraj · Accepted Answer · 2019-05-29 20:32:18Z

1

If you have multiple elements to combine you don't wan to do

$('p').add($div1).add($div2).add($div3).add($div4).add($div5).add($div6) ...

Instead you want to convert a JavaScript array into a jQuery object

$( $.map([x,y,z], a => [...$.makeArray(a)]) )

Source: Merging jQuery objects

answered May 29, 2019 at 20:32

noraj

4,8212 gold badges39 silver badges42 bronze badges

3 Comments

Karlen Kishmiryan Over a year ago

You don't have to do $('p').add($div1).add($div2).... It also accepts an array of elements (and html, and selection): api.jquery.com/add/#add-elements

noraj Over a year ago

@KarlenKishmiryan You're right but there is still a difference, see i.imgur.com/YS7pFLK.png

noraj Over a year ago

Also the method I show will flatten the elements is they contains sub-elements.

Collectives™ on Stack Overflow

jQuery combine multiple elements

2 Answers 2

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related