I was experimenting with jQuery and came across a question. Can I use an actual selector with existing element as a bined 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?

I was experimenting with jQuery and came across a question. Can I use an actual selector with existing element as a bined 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?

• javascript
• jquery
• jquery-selectors

Share Improve this question Follow edited Apr 14, 2015 at 16:37 damian 5,44455 gold badges3737 silver badges6464 bronze badges asked Jun 2, 2014 at 12:30 Karlen KishmiryanKarlen Kishmiryan 7,56266 gold badges3737 silver badges4646 bronze badges 3

• 1 have a look at .add() api.jquery./add -- something like $("p").add($div) should do the trick – 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 Commented Jun 2, 2014 at 12:33
• Thanks @RoryMcCrossan, I know that ;) – Karlen Kishmiryan Commented Jun 2, 2014 at 12:35

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

You could use the jQuery add method:

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

If you have multiple elements to bine 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