悬停在元素上并且不影响具有相同类名的其他元素

Question

您好，我正在努力解决可能看起来很简单（也许很简单）的事情，但我无法弄清楚当有其他具有相同类名的元素时，如何只影响我悬停在上面的元素。

我显然遗漏了一些东西，但这是我正在使用和失败的内容，因为它将 .insertAfter() 应用于所有名为 .item 的元素，而不仅仅是悬停的那个：

$('.item').hover(
   function() {
      $('<div class="testText">TEST</div>').insertAfter('.block' , this);
   }, 
   function() {

   }
);

.item {
  display: block;
  margin: 5px;
  padding:5px;
  border: 1px solid #000;
  background: #fff;
  color: black;
  text-align:center;
}

.block {
  display: block;
  margin: 2px;
  background: #000;
  height:20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item"><div class="block"></div></div>
<div class="item"><div class="block"></div></div>
<div class="item"><div class="block"></div></div>
<div class="item"><div class="block"></div></div>
<div class="item"><div class="block"></div></div>

我尝试添加一个 .each() 函数，然后在里面使用 $(this)'hover() 但这也不是答案，所以我真的需要这里有一点帮助，只影响悬停的 .item。

谢谢

Answer 1

问题是因为 insertAfter() 不接受第二个参数中的 this 作为上下文选择器，就像 jQuery 对象 ($()) 那样，所以你选择 all .block并给他们打电话insertAfter()。

要解决此问题，您可以改用 find()：

$('.item').hover(function() {
  $(this).find('.block').after('<div class="testText">TEST</div>');
}, function() {
  // I assume you want to remove the content you added here as well...
  $(this).find('.testText').remove();
});

.item {
  display: block;
  margin: 5px;
  padding: 5px;
  border: 1px solid #000;
  background: #fff;
  color: black;
  text-align: center;
}

.block {
  display: block;
  margin: 2px;
  background: #000;
  height: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
  <div class="block"></div>
</div>
<div class="item">
  <div class="block"></div>
</div>
<div class="item">
  <div class="block"></div>
</div>
<div class="item">
  <div class="block"></div>
</div>
<div class="item">
  <div class="block"></div>
</div>