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 メソッドを使用する場合、最初のパラメーターとしてコールバック関数を渡し、2 番目のパラメーターとしてオプションのコンテキストを渡します。ご覧のとおり、"abc" をコンテキストとして渡しています (これはもちろんばかげています)。コンソールが多くの「abc」をスローすることを期待しますが、代わりに jQuery 要素を出力します!

誰かがこれに光を当てることができますか？

ありがとう、

マルティン

4

1 に答える 1

6

ご覧のとおり、"abc" をコンテキストとして渡しています (これはもちろんばかげています)。コンソールが多くの「abc」をスローすることを期待しますが、代わりに jQuery 要素を出力します!

jQuery オブジェクトを呼び出しているため、ES5 の ではなく、コンテキスト パラメーターを持たないjQuery のfilterを使用しており、jQuery オブジェクトは配列ではありません (ただし、多くの配列のような機能を提供し、いくつかの "メソッド」と同様の名前 — を含む)。Array#filterfilterfilter

3 つのオプション:

makeArray

jQuery を使用makeArrayして、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 にバインドし、 jQuery の供給をfilter無視することもできます。this

$(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");
});

... sだけでなく、配列のようなもので動作するようにArray#filter明示的に定義されArrayているためです。後者は、実際には最も効率的な方法かもしれません。フィドル

于 2012-07-24T14:15:19.073 に答える