3

私はこれを持っています：

  <ul id="pickme">
    <li>1</li>
    <li>2</li>
    <li>3
      <ul>
        <li>3-1</li>
      </ul>
    </li>
  </ul>

しかし、これが欲しい：

  <ul id="pickme">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li class="new_ul">
      <ul>
        <li>3-1</li>
      </ul>
    </li>
  </ul>

言い換えれば、私は挿入する必要があります

</li><li class="new_ul">

リストの 3 の後。私は .append と .prepend で遊んだことがありますが、適切な場所に挿入することができませんでした。

どんな助けでもいただければ幸いです

Br. アンダース

下に正解があります。それを使用すると、1 つのレベルのみを実行します。ただし、同じ例は、複数のレベルを実行できます。('>li>ul') を ('ul') に変更するだけで、ネストされたすべての ul が検出され、処理されます。完全！

(ネストされた ul の無限のレベルを実行します)

$('#pickme').find('ul').each(function() {
    $(this).wrap('<li class="new_ul"></li>').parent().insertAfter($(this).parent().parent());
});

この場合、次のようになります。

  <ul id="pickme">
    <li>1</li>
    <li>2</li>
    <li>3
      <ul>
        <li>3-1
          <ul>
            <li>3-1-1</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>

次のようになります。

  <ul id="pickme">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li class="new_ul">  <<new li
      <ul>
        <li>3-1</li>
        <li class="new_ul">  <<new li
          <ul>
            <li>3-1-1</li>
          </ul>
        </li>
      </ul>
    </li>
    </li>
  </ul>
4

4 に答える 4

3

これはうまくいきます。

// get the #pickme element
var pickme = $('#pickme');

// find all the LI elements that are directly under #pickme
var pickmeLIs = pickme.find('>li');

// find all the UL elements that are directly under our found LI elements
var pickmeULs = pickmeLIs.find('>ul');

// loop through our UL elements
pickmeULs.each(function() {

    // wrap this UL element in the new LI element
    $(this).wrap('<li class="new_ul"></li>');

    // select the wrapping LI we just added to the UL element
    var wrapingLI = $(this).parent();

    // find our original parent LI element
    var originalParent = $(this).parent().parent();

    // move this and the new wrapping LI to the right place
    wrapingLI.insertAfter(originalParent);
});

これは次のように要約できます。

$('#pickme').find('>li >ul').each(function() {
    $(this).wrap('<li class="new_ul"></li>').parent().insertAfter($(this).parent().parent());
});
于 2009-11-05T13:23:15.293 に答える
2

他に使用#pickmeできるリスト項目の数を知る方法がある場合は、これを使用します。$('#pickeme li:eq(theIndex)')

$('#pickme li:last').after('<li class="new_ul"><ul><li>3-1</li></ul></li>');

テスト済みで動作します。

アップデート

ボビンスとマイラのおかげで、あなたが求めていることを正確に行う次のものができました。

$('#pickme li:last-child').replaceWith('<li class="new_ul"><ul><li>3-1</li></ul></li>');

出力：

<ul id="pickme">
    <li>1</li>
    <li>2</li>
    <li class="new_ul">
      <ul>
        <li>3-1</li>
      </ul>
    </li>
</ul>
于 2009-11-05T13:34:49.077 に答える
1

最後の子セレクターは、その後に新しいアイテムを追加することを保証します。

それを次のように使用できます

$('<li class="new_ul">4</li>').appendTo("ul#pick_me > li:last-child");

于 2009-11-05T13:26:13.563 に答える
0

内部テキストを取得する .html() を使用します。文字列を操作します。次に、.html(newHtml) を使用して新しい内部テキストを設定します。

prepend と append に関する問題は、prepend または append する必要がないことです。途中 (3 の後) に挿入する必要があります。

于 2009-11-05T13:15:05.047 に答える