title: Declaring $(this) variable before actual function
body: <p>I have to make a bunch of checks based on ID's of some elements, but those all differ a little.</p>
  
  <p>So I made a bunch of functions, and instead of always having to repeat <code>$(this).children ...</code> I wanted to have a short variable for that. But when I declare it outside the actual function, I get <code>undefined</code>.</p>
  
  <p>Isn't the code supposed to work like: Hmm, so there's a variable using <em>this</em>, and right now <em>this</em> is a <em>list</em>, then I'll become <code>$('ul').children ...</code> ? 
  What logic is it following and how should I fix it?</p>
  
  <p>Minified example of issue:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    var thisID = $(this).attr('id');
  
    function replaceContent(id) {
      $('#' + id).html('new content, and the ID is: ' + thisID);
    }
  
    $('button').on('click', function() {
      alert(thisID);
      // replaceContent(thisID);
      replaceContent(hello);
    })
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="hello"&gt;abc&lt;/div&gt;
  
  &lt;div id="result"&gt;&lt;/div&gt;
  
  &lt;button&gt;button&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/2kduy9vp/84/" rel="nofollow noreferrer">https://jsfiddle.net/2kduy9vp/84/</a></p>