jQuery select a class and a 'next' element of this class

Question

Is it possible to select both $('.foo') and $(this).next('.subfoo') for the same mouseenter?

I have a code that necessitates that I select instances of '.subfoo' in this way, and I want it to display the closest instance of '.subfoo' on mousing over a '.foo', and not hide '.subfoo' til the mouse leaves both.

I think I have that part of the code figured out, but I don't know how to select both in one statement & I can't find anything about it.

thanks

Answer 1

The script I was developing here was a list of links, with a pop-out for each link containing more information about the link. the purpose of this question was to figure out how to open a pop-out by hovering over an icon, and keep it open after the mouse leaves the icon, and enters the pop-out.

Part of the difficulty was there there were many instances of the same type of object on the same page, so the solution had to be generic, and trigger the pop-out closest to the hovered icon.

The HTML:

<li class="foo">
   <span class="icon"></span>
   <a href="">Title</a>
</li>
<li class="subfoo">
   Pop-out contents
</li>

The JavaScript:

/*setup of variables and functions to be used*/

function clear(){ //set up a function to hide all pop-outs
$('.foo').each(function(){
$(this).next('.subfoo').hide()});}

var popoutHover = false; //initialize switch variable for following function:

$('.subfoo').mouseenter(function(){
popoutHover = true;}); //Set the variable to 'true' if the mouse is hovering over a pop-out

$('.subfoo').mouseleave(function(){
popoutHover = false; //Set the variable to 'false' and hide pop-outs if the mouse leaves
clear();
});

/*The main functionality*/

$('.icon').hoverIntent(function(){ //Hover over the icon for a link
        clear(); //Hide open pop-outs
        $(this)
            .closest('.foo') //Select the link next to the icon
            .siblings('.subfoo') //Select the pop-out for the link
            .slideDown(240)}, //Open the pop-out

function(){//If the mouse leaves the icon
        if (!popoutHover){ //And it is not hovering over a pop-out
        $(this)
            .closest('.foo') //Select the link
            .siblings('.subfoo') //Hide the pop-out
            .hide()}}
);

Here's a quick fiddle, as it might demonstrate better than I can explain at the moment: https://jsfiddle.net/kuzvgqkz/1/

Answer 2

You can use the Multiple Selector syntax

$('selector1, selector2, selectorN')

Or the JQuery add method

var combinedSet = $(this).next('subfoo').add('.foo');
combinedSet.mouseenter(function() { 
    //do stuff in here
});