0

フォームの内容は気にせず、[追加]をクリックするたびに新しいセットを追加したいだけです。ただし、いくつかの条件付きフィールドを追加します。しかし、それを念頭に置いて、実際にIDを繰り返す必要がありますか？そして、クローンイベントはこれを処理するための最良の方法ですか？

<div id="wrapper">
<div id="condition-1">
  <select id="trigger-1" class="trigger">
      <option value="0">Select...</option>
      <option value="1">View Count</option>
      <option value="2">Comment Count</option>
  </select>
  <select id="operator-1" class="operator">
      <option value="0">Select...</option>
      <option value="1">Is Greater Then</option>
      <option value="2">Less Than</option>
  </select>
  <div id="input-1" class="input">
      <input id="number-1"></input>
  </div>
</div>


<div id="add-1" class="add">Add more</div>

私はjQuery.clone（）の多くの例を掘り下げてきましたが、このような構造に例を適用することはできませんでした。私の目標は、[さらに追加]をクリックするたびに新しいフォーム要素のセットを追加することです。実際のコンテンツのクローンを作成するかどうかは関係ありません。クローンを作成してから、IDを適切に反復するだけです。

私は次のようなものを使ってみました：

var cur_num = 1;

var cloned = $("#condition-" + cur_num).clone(true, true).get(0);

++cur_num;

cloned.id = "condition-" + cur_num;                  // Change the div itself.
$(cloned).find("*").each(function(index, element) {   // And all inner elements.
    if(element.id)
    {
        var matches = element.id.match(/(.+)_\d+/);
        if(matches && matches.length >= 2)            // Captures start at [1].
            element.id = matches[1] + "-" + cur_num;
    }
});

$(cloned).appendTo($("#condition-wrapper"));*/

上記のコードブロックは、必要なブロックのクローンを作成して追加します。しかし、最初の条件IDを＃condition-2に繰り返すため、その後のすべてのブロックが＃condition-2になり、condition-1の子をtrigger-2operator-2に変更する方法がわかりません。どんな助けでもありがたいです、ありがとう！

4

1 に答える 1

0

これを試して

$(function(){
$('.add').bind('click',function(){

    var $this=$(this),
        $cloned=$this.prev().clone(),
        re=/(\d+)$/,
        counter=1,
        cid=$cloned.attr('id').replace(re,function(n){
            return counter+=parseInt(n);
        });

        $cloned.attr({id:cid})
        .find('[id]')
        .each(function(i,o){
          var iid=$(o).attr('id').replace(re,counter);
          $(o).attr({id:iid});
        })
        .end()
        .insertBefore($this);
});
})
于 2012-05-18T16:18:52.417 に答える