jQuery选择一个类和这个类的“下一个”元素

Posted 2023-02-25

【中文标题】jQuery选择一个类和这个类的“下一个”元素

【英文标题】：jQuery select a class and a 'next' element of this class

【发布时间】：2013-11-14 17:51:44

【问题描述】：

是否可以同时选择 $('.foo') 和 $(this).next('.subfoo') 对于同一个 mouseenter？

我有一个代码需要我以这种方式选择'.subfoo' 的实例，并且我希望它在将鼠标悬停在'.foo' 上时显示最接近的'.subfoo' 实例，而不是隐藏'.subfoo' 直到鼠标离开两者。

我想我已经弄清楚了那部分代码，但我不知道如何在一个语句中同时选择两者，而且我找不到任何关于它的信息。

谢谢

【问题讨论】：

.add() 你在找什么吗？

【参考方案1】：

您可以使用Multiple Selector 语法

$('selector1, selector2, selectorN')

或者 JQuery add 方法

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

【参考方案2】：

我在这里开发的脚本是一个链接列表，每个链接都有一个弹出窗口，其中包含有关该链接的更多信息。 这个问题的目的是弄清楚如何通过将鼠标悬停在图标上来打开弹出窗口，并在鼠标离开图标并进入弹出窗口后保持打开状态。

部分困难在于同一页面上有许多相同类型对象的实例，因此解决方案必须是通用的，并触发最接近悬停图标的弹出窗口。

html：

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

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()
);

这是一个快速的小提琴，因为它可能比我现在可以解释的更好： https://jsfiddle.net/kuzvgqkz/1/