Jquery, 'this' inside function always returns document

Question

$("#oulist li").filter(() => {
  console.log(this);
}).css("background-color", "red")

Hi, Whenever I try to use this function, this always returns as document. I am not sure whether this has something to do with pug.js.

Answer 1

Your problem is you are using the newer ES6 arrow functions which don't use this as you would expect. Change () => { } to the traditional function() {} notation to see the difference. Read more about the arrow functions here.

You also forgot to return this; to return the <li> elements for .css();

$("#oulist li").filter(function(foo) {
  console.log(this);
  console.log("foo: " + foo); // Don't really need foo, but included.
  return this; // return <li> back to be ran with .css();
}).css("background-color", "red");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol id="oulist">
  <li>Foo</li>
  <li>Bar</li>
  <li>Foo</li>
  <li>Bar</li>
  <li>Foo</li>
  <li>Bar</li>
  <li>Foo</li>
</ol>