jquery - 如何修改以下 jQuery 代码使其适用于每个 li 元素？

Question

我有以下内容：

$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);

基本上有时会变成这样：

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

进入这个：

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

问题是页面有很多<li></li>.

如何做到这一点，以便代码仅应用于每个li而不干扰其余部分？

Answer 1

迭代li元素并执行相对于当前元素的单独更改：

$("li").each(function() {
    var content = $(this).clone(true),
    ul = content.children('ul').remove();

    $(this).html($('<span />').append(content.contents()).append(ul));        
});

更新：使我的答案适应编辑后的代码：

$('#wpbdp-categories > .wpbdp-categories > li.cat-item').each(function() {
    var $this = $(this);
    var $ul = $this.children("ul");
    $this.children("ul").remove()
    $this.wrapInner('<span>')
    $this.append(#ul);
});

Answer 2

.each允许您迭代每个选定的元素，然后您可以将操作应用于每个元素：

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

通过正确使用 jQuery 方法，您还可以保存一些显式的 DOM 操作。