How to alter concurrent list items from multiple nested lists with jQuery
<p>If I have the following nested lists</p>

<pre><code>&lt;ul&gt;
  &lt;li class="hide"&gt;list 1.1&lt;/li&gt;
  &lt;li&gt;list 1.2&lt;/li&gt;
  &lt;li&gt;list 1.3
    &lt;ul&gt;
      &lt;li&gt;list 2.1&lt;/li&gt;
      &lt;li class="hide"&gt;list 2.2&lt;/li&gt;
      &lt;li&gt;list 2.3
        &lt;ul&gt;
          &lt;li id="list-item"&gt;list 3.1&lt;/li&gt;
          &lt;li class="hide"&gt;list 3.2&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class="hide"&gt;list 2.4&lt;/li&gt;
      &lt;li class="hide"&gt;list 2.5&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li class="hide"&gt;list 1.4&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>How do I show items 3.2, 2.4, 2.5 and 1.4 using jquery without showing the other hidden items. (In the displayed tree these items are all next to one another even if they are from different lists.)</p>

<p>I have tried the folllowing with no success - it only hides the next li.</p>

<pre><code>$("li").find("#list-item").nextUntil(":not(.hide)").removeClass("hide");
</code></pre>

<p>How do I make it select from all li elements and not just those in the current ul?</p>

<p>Edit to add: Here is an example on JS Bin:
<a href="http://jsbin.com/usoyul/2/edit" rel="nofollow">http://jsbin.com/usoyul/2/edit</a></p>
