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?

Answer 1

You could use the jQuery add method:

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

Answer 2

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