1

div の作成に関して 1 つの質問があります。

ボタンがあります。ユーザーがクリックすると、javascript (または jquery) で div を作成する必要があります。ただし、ユーザーがもう一度クリックすると、別の div が作成されますが、ID が異なります。したがって、ユーザーがクリックするたびに、異なる ID で div を作成する必要があります。

divの作成方法は部分的に知っていますが、異なるIDでdivを作成する方法がわかりません。

4

7 に答える 7

7 

var c = 0; // Counter

$('#add').on('click', function() {
  c += 1;
  $('#parent').append('<div id="child'+ c +'">'+ c +'</div>');
});
#child1{color:red;}
#child2{color:blue;}
#child3{color:orange;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add">ADD</button>
<div id="parent"></div>

于 2012-05-06T19:22:53.240 に答える
1 
var divcount = 1;
$('button').click(function(){
   $('<div/>', { id:'comment'+divcount++ })
});
于 2012-05-06T19:24:09.117 に答える
1

これがランダムIDジェネレーターです。

function createParanoidID() {
    return 'id_' + Math.floor(Math.random() * 9e99).toString(36);
}

createParanoidID();  // id_1js7ogi93ixt6x29w9svozegzhal67opdt3l3cf1iqidvgazlyaeh1ha7a74bswsg
createParanoidID();  // id_1fleq6chguuyyljhy39x3g7mg661mg845oj8fphnxgvm0bdgz7t3w0q01jptogvls
createParanoidID();  // id_ajz1ft17ml4eyz08gd3thcvq3fx1ycr927i0h2zgyw8bzq9wurv1gdfogly8tbls
于 2012-05-06T19:30:44.770 に答える
0

これを行う簡単な方法を次に示します。

まず、ボタンが必要です。

​&lt;button id="onClickOfThis​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ButtonAnewDivWithArandomIDwillBeInserted"></button>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

次にJavaScript：

$("#onClickOfThisButtonAnewDivWithArandomIDwillBeInserted").on('click', function() {

var myID = 'randomIDnumber_'+Math.random()+Math.random()+Math.random()+Math.random()+Math.random()+Math.random();
var MyNewElement = document.createElement('div');
    MyNewElement.id = myID.replace(/\./g, '');
    $(MyNewElement).appendTo('body');
});

ここにフィドルがあります

于 2012-05-06T19:40:05.997 に答える
0

変数をカウンターとして使用し、「attr」関数を使用して id 属性を設定します。

于 2012-05-06T19:23:03.717 に答える
0

以前の回答のようにグローバルカウンターを使用したくない場合は、いつでも子の数を取得し、それを別のIDを作成する相対値として使用できます。このようなもの（jQueryを使用）：

function add_another_div() {
    var wrap_div = document.getElementById("#id_of_div_who_contain_all_childrens");
    var already_childs = $("#id_of_div_who_contain_all_childrens").children().length;
    var div = document.createElement('div');
    var divIdName = 'new_div-'+ (already_childs+1);
    div.setAttribute('id', divIdName);
    wrap_div.appendChild(div); 
}

もちろん、これにはすべての子が同じ親 (同じラッパー) を持つ必要があります。そうではなく、複数のラッパーに分かれている場合は、それらすべてに一意のクラス名を使用し、そのように数えます。このアプローチは、注意が必要なグローバル カウンターを使用する代わりに、はるかに優れた簡単な方法であることがわかりました。

于 2012-05-06T19:37:51.803 に答える
0

HTML

<button id="button">Create Div</button>
<div class="container"></div>

jQuery:

$('#button').on('click', function() {

    var count = $('div.container div').length,
        id = count + Math.floor(Math.random() * 100);
    $('div.container').append('<div id="'+ id+'">ID of this div is: '+ id +' </div>');

});

デモ

于 2012-05-06T19:30:11.113 に答える