在jQuery过滤器里面使用这个箭头函数

时间:2016-03-15 11:49:09

标签: javascript jquery ecmascript-6 arrow-functions

拥有这样的代码:

$elements.filter(() => {
    console.log(this); // will be the parent scope's "this"
});

您无法获取应该过滤的元素。 所以你需要使用正常的函数,比如:

$elements.filter(function(){
    console.log($(this)); // will be the element to filter
});

还有其他方式而不是使用普通功能吗? 我知道点击事件可以使用event.currentTarget,但filter中没有事件参数。

1 个答案:

答案 0 :(得分:6)

虽然您没有获得对预期this的引用,但可以按顺序使用匿名函数,索引和DOM节点提供的参数:< / p>

$elements.filter((index, node) => {
  console.log(node);
});

&#13;
&#13;
let $elements = $('li');

$elements.filter((index, node) => {
  console.log(node);
});
&#13;
li {
  width: 50%;
  border: 2px solid #000;
}
li.red {
  border-color: red;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="red"></li>
  <li class="red"></li>
  <li class="red"></li>
  <li class="red"></li>
  <li></li>
  <li class="red"></li>
  <li class="red"></li>
  <li></li>
  <li class="red"></li>
  <li></li>
  <li class="red"></li>
  <li class="red"></li>
  <li class="red"></li>
  <li class="red"></li>
  <li></li>
  <li></li>
  <li class="red"></li>
  <li class="red"></li>
  <li class="red"></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
&#13;
&#13;
&#13;

JS Fiddle demo;