1

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?

4

2 に答える 2

2

要素を繰り返し処理し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);
});
于 2012-12-17T03:17:42.057 に答える
2

.each選択した各要素を反復処理してから、操作を各要素に適用できます。

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

jQuery メソッドを適切に使用すると、明示的な DOM 操作を保存することもできます。

于 2012-12-17T03:21:58.753 に答える