9

HTMLに「answerdiv 1」と「answerdiv 2」という2つのdivがあります。

今、私は "answerdiv 3" "answerdiv 4" "answerdiv 5" などのように独自に div id を付与/作成したいと考えています。

javascript/jquery を使用して、これらの動的に作成された div に一意の ID を追加するにはどうすればよいですか?

私のプロジェクトでは、ユーザーは「n」個の div を追加できますが、厳密な制限はありません。

手伝ってください。

前もって感謝します

================================================== ==============================

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

<div id="answertextdiv">
   <textarea id="answertext" name="answertext" placeholder="Type answer here" rows="2" cols="40" tabindex="6" onBlur="exchangeLabelsanswertxt(this);"></textarea>
</div>

私のJSコード:

function exchangeLabelsanswertxt(element)
{
    var result = $(element).val();
    if(result!="")
    {
        $(element).remove();
        $("#answertextdiv").append("<label id='answertext' onClick='exchangeFieldanswertxt(this);'>"+result+"</label>");
    }
}
function exchangeFieldanswertxt(element)
{
    var result = element.innerHTML; 
    $(element).remove();
    $("#answertextdiv").append("<textarea id='answertext' name='answertext' placeholder='Type answer here' rows='2' cols='40' tabindex='6' onBlur='exchangeLabelsanswertxt(this);'>"+result+"</textarea>");
}

上記のコードから、すべてのものを一意の「answertextdiv」IDに追加したいと思います。

4

7 に答える 7

8

div が次のようなコンテナにある場合:

<div id="container">
  <div id="answerdiv 1"></div>
  <div id="answerdiv 2"></div>
</div>

次のようなことができます：

//Call this whenever you need a new answerdiv added
var $container = $("container");
$container.append('<div id="answerdiv ' + $container.children().length + 1 + '"></div>');

可能であれば、グローバル変数を使用しないようにしてください...それらは最終的にあなたを噛むために戻ってきます。この場合、グローバル変数は実際には必要ありません。

于 2013-09-24T08:09:21.890 に答える
1

作成された div の数とともに、Javascript で「グローバル」変数を保持する必要があります。div を作成するたびに、それをインクリメントします。コード例:

<script type="text/javascript">
  var divCount = 0;

  function addDiv(parentElement, numberOfDivs) {
    for(var i = 0; i < numberOfDivs; i++) {
      var d = document.createElement("div");
      d.setAttribute("id", "answerdiv"+divCount);
      parentElement.appendChild(d);
      divCount++;
    }
  }
</script>

また、Javascript で多くのことを行うのに jQuery は必要ないことを覚えておいてください。これは、「書くことを減らして、より多くのことを行う」ための単なるライブラリです。

于 2013-09-24T08:03:47.117 に答える
0 

var newdivcount=0;
    function insertDivs(){
      newdivcount=newdivcount+1;
      var id="answerdiv-"+(newdivcount);
      var div=document.createElement("DIV");
      div.setAttribute("ID",id);
      var input=document.createElement("TEXTAREA");
      div.appendChild(input);
      document.getElementById('container').appendChild(input);  
    }
    <button onclick="insertDivs">InsertDivs</button>
      
      <br>
<div id="container">
    <div id="answertextdiv">
       <textarea id="answertext" name="answertext" placeholder="Type answer here" rows="2" cols="40" tabindex="6" onBlur="exchangeLabelsanswertxt(this);"></textarea>
    </div>
  </div>

于 2016-04-21T13:58:13.637 に答える
0

明示的または暗黙的に ID を生成するには、グローバル カウンター (より一般的には、一意の ID ジェネレーター) が必要です (後者の場合は、生成された div の最後を選択し、クラスまたは ID プレフィックスによって識別されます)。

それから試してください

var newdiv = null; // replace by div-generating code
$(newdiv).attr('id', 'answerdiv' + global_counter++);
$("#parent").append(newdiv); // or wherever
于 2013-09-24T08:07:14.427 に答える