2

在尝试编写一些很棒的 JS 时，我遇到了一些奇怪的 JS 行为。我创建了一段代码来演示我的问题：

http://jsfiddle.net/CeyCy/

<html>
  <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(function() {
      var images = $('.images').children();
      var filtered = images.filter(function(i, image) {
        console.log(this);
      }, "abc");
    });
    </script>
  </head>
  <body>
    <div class="options">
      <div class="filters">
      </div>
      <ol class="pagination">
      </ol>
    </div>
    <div class="results">
      <ul class="images">
        <li data-category="Zakelijk">Result 1</li>
        <li data-category="Speels">Result 2</li>
        <li data-category="Blogging">Result 3</li>
        <li data-category="Zakelijk">Result 4</li>
        <li data-category="Speels">Result 5</li>
        <li data-category="Blogging">Result 6</li>
        <li data-category="Zakelijk">Result 7</li>
        <li data-category="Speels">Result 8</li>
        <li data-category="Blogging">Result 9</li>
        <li data-category="Zakelijk">Result 10</li>
        <li data-category="Speels">Result 11</li>
        <li data-category="Blogging">Result 12</li>
        <li data-category="Zakelijk">Result 13</li>
        <li data-category="Speels">Result 14</li>
        <li data-category="Blogging">Result 15</li>
      </ul>
    </div>
  </body>
</html>

好的，现在我的问题。使用 Array.filter 方法时，您传入一个回调函数作为第一个参数，并将一个可选上下文作为第二个参数。如您所见，我将“abc”作为上下文传递（当然这很荒谬）。我希望我的控制台会抛出很多“abc”，但它会打印 jQuery 元素！

有人可以对此有所了解吗？

谢谢，

马汀

4

1 回答 1

6

如您所见，我将“abc”作为上下文传递（当然这很荒谬）。我希望我的控制台会抛出很多“abc”，但它会打印 jQuery 元素！

您正在使用jQuery'sfilter，它没有上下文参数，而不是 ES5's Array#filter，因为您正在调用filterjQuery 对象，并且 jQuery 对象不是数组（尽管它们提供了很多类似数组的功能，并且有几个“方法”具有相似的名称 — 包括filter)。

三个选项供您选择：

makeArray

您可以使用 jQuerymakeArray将 jQuery 对象转换为数组，例如：

$(function() {
  var images = $.makeArray($('.images').children());
  var filtered = images.filter(function(i, image) {
    console.log(this);
  }, "abc");
});

更新的小提琴

proxy/bind

或者，您可以使用 jQuery 的proxy函数（或 ES5 的Function#bind）绑定您传递给 jQuery 的迭代器函数，filter这样它就会忽略thisjQuery 提供的：

$(function() {
  var images = $('.images').children();
  var filtered = images.filter($.proxy(function(i, image) {
    console.log(this);
  }, "abc"));
});

应用于Array#filterjQuery 对象

或者你可以Array#filter直接应用到 jQuery 对象：

$(function() {
  var images = $('.images').children();
  var filtered = Array.prototype.filter.call(images, function(i, image) {
    console.log(this);
  }, "abc");
});

...因为Array#filter被明确定义为适用于任何类似数组的东西，而不仅仅是Arrays。最后一个实际上可能是最有效的方法。小提琴

于 2012-07-24T14:15:19.073 回答