jQuery $(this) 选择器意外选择了超过 1 个元素答案

【问题标题】：jQuery $(this) selector accidentally selects more than 1 elementjQuery $(this) 选择器意外选择了超过 1 个元素
【发布时间】：2017-08-30 08:02:40
【问题描述】：

我正在使用 .each() jQuery 函数和 $(this) 选择器来实现悬停的 div，但是由于给定的 div 彼此靠近，如果我移动，$(this) 选择器会选择多个元素鼠标太快了。

有什么方法可以确保强制$(this) 不选择多个元素？

这是我的 HTML：

<div class="row">
   <div class="col-md-4 donation 180">
      <div class="box">
         <div class="cover">
            <h2>Freedom<br>Package</h2>
         </div>
         <form class="form"></form>
      </div>
   </div>
   <div class="col-md-4 donation 200">
      <div class="box">
         <div class="cover">
            <h2>Sovereignty<br>Package</h2>
         </div>
         <form class="form"></form>
      </div>
   </div>
   <div class="col-md-4 donation 400">
      <div class="box">
         <div class="cover">
            <h2>Royalty<br>Package</h2>
         </div>
         <form class="form"></form>
      </div>
   </div>
</div>

这是我的 jQuery：

if($(window).width() < 800 ) {
    $(".form").show();
    $(".cover").hide();
} else {
    $(".donation").each(function() {
        $(this).hover(function() {
            $(this).children($(".box")).addClass("animated flipInY");
            $(this).children($(".box")).children($(".cover")).fadeOut("", function() {
                $(this).siblings($(".form")).show();
            });
        }, function() {
            $(this).children($(".box")).removeClass("animated flipInY");
            $(this).children($(".box")).children($(".form")).fadeOut("", function() {
                $(this).siblings($(".cover")).show();
            });
        });
    });
}

感谢您的帮助，谢谢！

【问题讨论】：

您的假设不正确。 this 只指一件事。这里的错误到底是什么？
你怎么知道它选择了多个元素，而不是它发生得如此之快以至于你认为它选择了两个？
this 不可能选择多于一件事。您能否更详细地描述您看到的行为以及您期望的行为？
我的意思是...如果this 是节点集合或节点数组，$(this) 可以选择多个事物。但在你的情况下不是。
.children($(".box")) 不正确。 please read documentation. .siblings($(".form")) 也是错误的，原因相同。

标签： javascript jquery html this each

【解决方案1】：

您不需要使用$(this)。您可以使用每个值。

$(".donation").each(function(i, val) {
  alert($(val).attr('class'));
});

【讨论】：

我的意思是，当然，如果您想选择所有其他具有该类的元素。情况似乎并非如此。
$(val) 将是具有donation 类的每个元素。他正在遍历它们。每个 val 都是单独的对象。
嗯...是的，我的印象是你的意思是在你得到它之后使用这个类，对不起。仍然......这不会解决不存在的问题。 :) 这与使用 this 没有什么不同。