Question

下面是我正在解决的问题。我将$('.box')存储到$box变量中。在我的实际代码中，我在许多地方使用$box来做事情并且工作正常，除了在下面的代码部分中，我试图在许多$box上使用循环jQuery的each()页面。我已经阅读了each()上的jQuery文档，看起来就像它应该工作一样。我最好的猜测是将对象存储到变量中存储DOM看到的第一个元素，jQuery不能迭代单个元素，但是有更多知识的人可以解释为什么这不起作用？

HTML：

<div class="button">Button</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

CSS：

.box {
  width: 100px;
  height: 100px;
  margin-top: 10px;
  background: dodgerblue;
}

.button {
  user-select: none;
  width: 200px;
  height: 50px;
  background: orange;
}

JS：

var $box = $('.box');
$('.button').on('click', function() {

  $($box).each(function(i) {  // Why does this work?
  //$box.each(function(i) {    // But this doesn't?

    $(this).append(i);

  });
});

以上是Codepen

上的相同代码

编辑：正如其中一个答案所指出的那样，我的示例代码中存在一个缺陷，使得它看起来不起作用，而实际上却是如此。我已经更新了我的代码和我的Codepen来修复这个例子。我的JS中必须有其他东西导致这不起作用。

Answer 1

尝试以下代码。您已将$（＆＃39; .box＆＃39;）对象分配到$ box，请参阅此处fiddle上的工作代码

var $box = $('.box');
$('.button').on('click', function() {
 $box.each(function(i) {  // Why does this work?
//$box.each(function() {    // But this doesn't?
   $(this).append(i);
 });
});

存储的选择器不能正常工作（）

1 个答案: