2

私のHTMLコードの構造は次のとおりです。

<div id="bb-bookblock" class="bb-bookblock">
    <div class="bb-item">
        <div class="bb-custom-side">
            Hello
        </div>
        <div class="bb-custom-side">
            <button id="add">Click Here to add The page</button>    
        </div>
    </div>
    <div class="bb-item">
        <div class="bb-custom-side">
            <p>This is first page</p>
        </div>
        <div class="bb-custom-side">
            <p>Hello</p>
        </div>
    </div>
    <div class="bb-item">
        <div class="bb-custom-side">
            <p>This is second Page</p>
        </div>
        <div class="bb-custom-side">
            <p>This is last page</p>
        </div>
    </div>
</div>

ボタンをクリックするとid=add、最後の div の後に新しい div を作成し、bb-item同じ 2 つの div が class name を持つようにしbb-custom-sideます。
クラスを使用してdivを作成するcreateElement方法は知っていますが、新しく作成されたdiv内にサブdivを作成する方法がわかりません。最後の子供または同様の概念を関連付けることはできますか?

したがって、クリックイベントの後、HTMLを次のようにしたいと思います。

<div id="bb-bookblock" class="bb-bookblock">
    <div class="bb-item">
        <div class="bb-custom-side">
            Hello
        </div>
        <div class="bb-custom-side">
            <button id="add">Click Here to add The page</button>    
        </div>
    </div>
    <div class="bb-item">
        <div class="bb-custom-side">
            <p>This is first page</p>
        </div>
        <div class="bb-custom-side">
            <p>Hello</p>
        </div>
    </div>
    <div class="bb-item">
        <div class="bb-custom-side">
            <p>This is second Page</p>
        </div>
        <div class="bb-custom-side">
            <p>This is last page</p>
        </div>
    </div>
    <--Newly created div-->
    <div class="bb-item">
        <div class="bb-custom-side">
            new div
        </div>
        <div class="bb-custom-side">
            new div 2
        </div>
    </div>
</div>
4

4 に答える 4

4

clone()div 要素のコピーを作成し、それをメイン div に追加するために使用します。

$("#add").click(function(){
    var clonedDiv = $(".bb-item:last").clone();
    clonedDiv = clonedDiv.find("div.bb-custom-side p").text("This is third Page");
    $("#bb-bookblock").append(clonedDiv);
});

DEMO FIDDLE

注:最後の div のテキストを更新しました (これは 3 ページ目です)。数を増やすには、ループに入れる必要があります。

于 2013-09-30T16:41:33.937 に答える
2

これを試して。

   $('#add').on('click',function(){
        $('.bb-item').eq(1).append($('.bb-item:last-child').html());
    });

                      OR

    $('#add').click(function(){
        $('.bb-item').eq(1).append($('.bb-item:last-child').html());
    });

ワーキングデモ

于 2013-09-30T16:52:30.643 に答える
2

これはすべての人にとって魅力的ではないかもしれませんが、個人的には、クローン作成には「白紙の状態」を好む傾向があります.

私だったら、こうします。

var $baseItem = $("<div></div>").addClass("bb-item");
var $baseCustomSide = $("<div></div>").addClass("bb-custom-side");

$("#add").click(function(){
    var $newItem = $baseItem.clone();

    $newItem.append($baseCustomSide.clone().html("your_first_content_here"));
    $newItem.append($baseCustomSide.clone().html("your_second_content_here"));

    $("#bb-bookblock").append($newItem);
});

既存の要素を再利用する本当に正当な理由がない限り、 clone から既存のコンテンツを「スクラブ」するために、はるかに複雑になる必要があることがわかりました。. . 空白のテンプレートを使用すると、常によりきれいに見えます。

于 2013-09-30T17:14:02.033 に答える