jQuery悬停，只有活动元素

Question

我有多个元素，类测试。如果我将它们悬停，它们周围应该有一个红色边框，因为我用div包裹它们。它可以工作，但是如何才能包装只有我正在盘旋的活动元素，而不是包含.test类的所有元素？

$(".test").hover(function() {
 $(".sample").wrap('<div style="border: 1px solid red;" />');
}

Answer 1

你应该在函数中使用$（this）。 $（this）将引用当前悬停的元素。

$(".test").hover(function() {
    $(this).wrap('<div style="border: 1px solid red;" />');
});

Answer 2

使用$（this）

$(".test").hover(function() {
 $(this).wrap('<div style="border: 1px solid red;" />');
}

Answer 3

如果我理解正确，您只想在当前悬停的项目中选择.sample。如果是，请参阅this question。 JQuery接受第二个参数。

$(".test").hover(function() {
     $(".sample",this).wrap('<div style="border: 1px solid red;" />');
}

Answer 4

如果您包含HTML，如何提供帮助会更加明显。我将假设class="sample"的对象是父对象。

$(".test").hover(function() {
 $(this).closest(".sample").wrap('<div style="border: 1px solid red;" />');
});

当你停止悬停或放入代码而不是一遍又一遍地包裹它时，你当然需要打开它。

如果您使用现有对象作为边框并且只是在悬停时更改类或样式会更好，取消悬停。由于我不知道您的HTML是什么，我只能猜测可能会使用的内容：

$(".test").hover(function() {
   $(this).addClass("active");
}, function() {
   $(this).removeClass("active");
});

然后有一个CSS规则：

.active {border: 1px solid red;}

Answer 5

我不确定这是否是您正在寻找的内容，但这将使用类测试包装所有已启用的元素。

$(".test:enabled").hover(function() {
    $(this).wrap('<div style="border: 1px solid red;" />');
});