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操作。

如何修改以下jQuery代码，以便它适用于每个li元素？

2 个答案: