title: Click trigger on page load (UL > LI)
body: <p>I have the following HTML code in my website:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="gallery"&gt;
      &lt;ul class="pictures"&gt;
          &lt;li&gt;&lt;a href="#" data-filter="*" class="active"&gt;All&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" data-filter=".web"&gt;Web&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" data-filter=".design"&gt;Design&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" data-filter=".video"&gt;Video&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And I want to have a click event triggering when the page loads.
  I want the first (or second) list item to be clicked when the page loads.</p>
  
  <p>I've tried with the following code, but I failed and I don't know how to do it:</p>
  
  <pre class="lang-js prettyprint-override"><code>$("document").ready(function() {
      setTimeout(function() {
          $("ul.pictures li:nth-child(2)").trigger("click");
      },10);
  });
  </code></pre>