Hiding Extra Items in a list using jQuery in a tricky situation (markup is not ideal)
<p>I want to make a long list short by hiding some elements in long sub-lists without adding extra processing on the server side. The problem is that the markup that comes from the server is not controlled by me and is not designed in a way to make my job easy. here is the code</p>

<pre><code>&lt;ul id="long-list"&gt;
  &lt;li class="item"&gt;&lt;/li&gt;
  &lt;li class="item"&gt;&lt;/li&gt;
  &lt;li class="item"&gt;&lt;/li&gt;
  &lt;li class="header"&gt;&lt;/li&gt;
  &lt;li class="item"&gt;&lt;/li&gt;
  &lt;li class="item"&gt;&lt;/li&gt;
  &lt;li class="item"&gt;&lt;/li&gt;
  &lt;li class="item"&gt;&lt;/li&gt;
  &lt;li class="item"&gt;&lt;/li&gt;
  &lt;li class="header"&gt;&lt;/li&gt;
  &lt;li class="item"&gt;&lt;/li&gt;
  .
  .
  .
&lt;/ul&gt;
</code></pre>

<p>As you've notices the headers are sibling to the items. Now, I want to have a jQuery code that shows only 3 items after each header and hide the rest to make the list shorter and more usable. </p>

<p>Here is my try which is <strong>not</strong> working:</p>

<pre><code>  $('#long-list li.header ~ li.item:gt(3)').hide();
  $('#long-list li.header ~ li.item:lt(3)').show();
  $('#long-list li.header').show();
</code></pre>

<p>The extra feature is adding a node at bottom of each section that has hidden items, saying how many items has been hidden, say "5 more..."</p>
