Question

I have the following:

$ul = $('#wpbdp-categories > .wpbdp-categories > li.cat-item > ul');
$('#wpbdp-categories > .wpbdp-categories > li.cat-item > ul').remove();
$('#wpbdp-categories > .wpbdp-categories > li.cat-item').wrapInner('<span>');
$('#wpbdp-categories > .wpbdp-categories > li.cat-item').append($ul);

Which basically turns sometimes like this:

<li>
  <a></a>
  (10)
  <ul></ul>
</li>

into this:

<li>
  <span>
    <a></a>
    (10)
  </span>
  <ul></ul>
</li>

The problem is that the page has many <li></li>.

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

Answer 1

.each lets you iterate over each of the selected elements and then you can apply the operation to each of them:

$('#wpbdp-categories > .wpbdp-categories > li.cat-item').each(function() {
    $(this).contents().filter(function() {
        return this.nodeName !== 'UL';
    }).wrapAll('<span />');
});

With proper use of jQuery methods, you can also save some explicitly DOM manipulations.