jquery - jQuery 追加ネスト

Question

var f = a('<span class="customSelectInnerText" />');
var e = a('<span class="customSelect"><span class="customSelectInner"></span></span>').append(f);

結果:

<span class="customSelect>
   <span class="customSelectInner"></span>
   <span class="customSelectInnerText">Text</span>
</span>

希望の代わりに：

<span class="customSelect>
   <span class="customSelectInner">
      <span class="customSelectInnerText">Text</span>
   </span>
</span>

Answer 1

コードを調整するだけの場合は、customSelectInnerに追加する必要がありますf。これは。.で行うことができますfind。

var f = a('<span class="customSelectInnerText" />');
var e = a('<span class="customSelect">' +
          '<span class="customSelectInner"></span></span>')
         .find('.customSelectInner')append(f);

そのコードを壊して、すべての要素に独自の変数を持たせることに注意してください。これは、はるかに読みやすく、保守とデバッグが容易です。

Answer 2

ステートメントは、最も外側の要素を選択します。前のを追加する前に、インナーチャイルドを選択する必要があります<span>。への変更：

var e = a('<span class="customSelect"><span class="customSelectInner"></span></span>')
            .children().append(f);

Answer 3

var f = a('<span class="customSelectInnerText" />');

var e = a('<span class="customSelect"><span class="customSelectInner"></span></span>');
$(".customSelectInner").append(f);