How to modify the following jQuery code so it applies to each li element?
<p>I have the following:</p>

<pre><code>$ul = $('#wpbdp-categories &gt; .wpbdp-categories &gt; li.cat-item &gt; ul');
$('#wpbdp-categories &gt; .wpbdp-categories &gt; li.cat-item &gt; ul').remove();
$('#wpbdp-categories &gt; .wpbdp-categories &gt; li.cat-item').wrapInner('&lt;span&gt;');
$('#wpbdp-categories &gt; .wpbdp-categories &gt; li.cat-item').append($ul);
</code></pre>

<p>Which basically turns sometimes like this:</p>

<pre><code>&lt;li&gt;
  &lt;a&gt;&lt;/a&gt;
  (10)
  &lt;ul&gt;&lt;/ul&gt;
&lt;/li&gt;
</code></pre>

<p>into this:</p>

<pre><code>&lt;li&gt;
  &lt;span&gt;
    &lt;a&gt;&lt;/a&gt;
    (10)
  &lt;/span&gt;
  &lt;ul&gt;&lt;/ul&gt;
&lt;/li&gt;
</code></pre>

<p>The problem is that the page has many <code>&lt;li&gt;&lt;/li&gt;</code>.</p>

<p>How to do it so the code is only applied to each <code>li</code> without interfering with the rest?</p>
