0

私は答えを見つけることができなかったので、これが繰り返しの質問ではないことを願っています。

クローンを作成する必要があるdivがあります。

<div class="phoneBookEntriesContainer">
    content here
</div>

後でIDを追加する必要があります...質問しないでください：P。

<script type="text/javascript">
var i = 1;
$(".phoneBookEntriesContainer").attr("id","phoneBookEntries" + i);
var doSomething = function(){

    $(".phoneBookEntriesContainer").attr("id","phoneBookEntries" + i);
    $("#phoneBookEntries" + i).clone().insertAfter("#phoneBookEntries" + i);

    i ++;
};
</script>

上記のコードはちょっと機能しますが、divに一意のIDを与える代わりに、すべてを同じIDに置き換えます。

したがって、最初は1つの#phoneBookEntries1divがあり、ボタンをクリックして関数を実行した後、2つのdiv#phoneBookEntries2などがあります。

4

6 に答える 6

3

$(".phoneBookEntriesContainer")クラスを持つすべてのDOM要素の配列を返しますphoneBookEntriesContainer。したがって、を使用するattrと、これらすべての要素のIDが置き換えられます。特定の要素でのみ置き換える場合は、どの要素を指定する必要があります。

次の方法でそれを行うことができます：

//picks the last instance
$(".phoneBookEntriesContainer").last().attr("id","phoneBookEntries" + i);

//picks the last instance
$(".phoneBookEntriesContainer").first().attr("id","phoneBookEntries" + i);

//picks the 3rd instance
//.eq() is 0-indexed
$(".phoneBookEntriesContainer").eq(2).attr("id","phoneBookEntries" + i);

.each()目的を達成するには、jQueryのメソッドを使用してすべての要素をループする必要があります。詳細については、Hiddeの回答を参照してください。

divのクローンを作成し、毎回新しいIDを付与する場合は、変数を使用して、追加する番号を追跡します。

こちらのデモをご覧ください

これはJqueryコードです

$(document).ready(function(){

        var currentID = 1;

        $('button').on('click',function(){
            currentID++;
            $('.foobar')
                .first()
                .clone()
                .appendTo('#wrapper')
                .attr('id','span' + currentID)
                .text('This has an ID of ' + currentID);

        });

});​
于 2012-05-31T13:47:28.347 に答える
2

それぞれをループすることをお勧めします.phoneBookEntriesContainer：

$(".phoneBookEntriesContainer").each (function (i, el) {
    el.attr('id', ('phoneBookEntries' + (i+1)));
});
于 2012-05-31T13:48:54.913 に答える
0

あなたのコードは少し紛らわしいようだったので、私はここで非常に冗長なバージョンを作成しました：http: //jsfiddle.net/SY3aA/2/

作業例のコンテンツをクリックすると、別のコンテンツが追加されます（私が思うように変更する必要があります）

まず、最初の1つに0のId属性を指定します。何が起こっているのかがわかるように、クラスの追加/削除をいくつか入れました。追加された要素IDを反映するために、同じ目的でテキストを追加しました。

var i = 1;
$(".phoneBookEntriesContainer").attr("id", "phoneBookEntries0");

var doSomething = function() {
    var myclone = $(".phoneBookEntriesContainer").eq(0).clone();
    $(".phoneBookEntriesContainer").removeClass("lastAdd imprev");

    var myentry = 'phoneBookEntries' + i;
    var myPrevEntry = '#phoneBookEntries' + (i - 1);
    var prev = $(myPrevEntry);
    prev.addClass('imprev');
    myclone.attr('id', myentry).insertAfter(prev);
    $('#' + myentry).text($('#' + myentry).text() + myentry);
    //this toggle seemed confusing so I changed it
    $('#' + myentry).addClass("lastAdd");

    i++;
}

$(document).on("click", '.phoneBookEntriesContainer', function() {
    $(".phoneBookEntriesContainer").removeClass("mydiv");
    $(this).addClass('mydiv');
    doSomething();
});

このCSSで：

.mydiv{border:solid 1px lime;}
.lastAdd{background-color:aqua;}
.imprev{border:solid blue 2px;}
于 2012-05-31T14:45:46.243 に答える
0 
<div class="content"></div>

javascript：

var myFuntion = function(){
   var id = '' + $('.content').children().length;
   $('.content').append("<div class='phoneBookEntriesContainer' id='"+ id +"'></div>");
}

.contentdivにエントリを追加します

于 2012-05-31T14:05:14.563 に答える
0

lengthプロパティを使用して要素の総数を取得し、次のようにIDプレフィックスに追加できます。

HTML

<div class="phoneBookEntriesContainer">
    content here
</div>

<a href="#" class="cloneDiv">Click to Clone</a>

JavaScript

// Bind to Clone Button //
$('.cloneDiv').bind('click', function(e){  

    // Prevent Default Action //
    e.preventDefault();

    // Create Clone //
    var $clone = $('.phoneBookEntriesContainer').filter(':last').clone();

    // Create Unique ID using Length //
    var cloneID = 'phoneBookEntries'+$('.phoneBookEntriesContainer').length;

    // Append to Body and Add Unique ID //
    $clone.attr('id', cloneID);
    $('.phoneBookEntriesContainer').filter(':last').after($clone);
});​

JSFiddle Here

これがお役に立てば幸いです。

于 2012-05-31T13:59:42.293 に答える
0 
// set first container id
$(".phoneBookEntriesContainer").attr("id","phoneBookEntries1");

// on button click
$("#mybutton").click(function(){
    // calculate the new ID as phoneBookEntries count + 1
    var newID = "phoneBookEntries" + ($("div[id^='phoneBookEntries']").size() + 1);
    // insert the new div after the last one
    $("<div id='"+newID+"'></div>").insertAfter($("div[id^='phoneBookEntries']").last());
    // add the class to the divs which doesn't have it
    $("div[id^='phoneBookEntries']").addClass("phoneBookEntriesContainer");
});
于 2012-05-31T14:01:32.037 に答える