Javascript JQuery-克隆元素并更改多个属性的属性_Javascript_Jquery

Javascript JQuery-克隆元素并更改多个属性的属性

javascript jquery

Javascript JQuery-克隆元素并更改多个属性的属性,javascript,jquery,Javascript,Jquery,我有几个类似的元素： <div class="image_insert clearfix"> <label for="userfile3">Image 3</label> <input type="file" name="userfile3" id="userfile3"> <label for="slika_naziv_eng3">Image Title</label> <inpu

我有几个类似的元素：

  <div class="image_insert clearfix">
    <label for="userfile3">Image 3</label>
    <input type="file" name="userfile3" id="userfile3">
    <label for="slika_naziv_eng3">Image Title</label>
    <input type="text" name="slika_naziv_eng3" id="slika_naziv_eng3"/>
  </div>

我需要更改有数字的所有属性。每次添加新元素时，需要计算元素数，新数为元素数+1。我怎么能做到这一点呢？

我从过去写的类似id中抓取了这个

$("#containerDiv").find("div").each(function(){
    lastVersionNumber = jQuery(this).attr("id").replace(/\D/g, "")/1;
});
newVersionNumber = lastVersionNumber + 1;

# build the new version HTML string
var sHTML = "<div name='mydiv'>";
sHTML += jQuery("#templateCode").html()
sHTML = sHTML.replace(/<input/i, "<input name='v"+newVersionNumber+"_name'");   
sHTML += "</div>";


$("#containerDiv").append(sHTML);

$（“#containerDiv”）.find（“div”）.each（function（）{
lastVersionNumber=jQuery（this）.attr（“id”）.replace（/\D/g，”）/1；
});
newVersionNumber=lastVersionNumber+1；
#构建新版本的HTML字符串
var sHTML=“”；
sHTML+=jQuery（“#templateCode”）.html（）
sHTML=sHTML.replace（/试试这个：clon包含新元素，因此，您需要找到您的元素
  <!DOCTYPE html>
  <html>
  <head>
    <title>Clone Elements with Jquery by @MaoAiz + Sasha</title>
  </head>
  <body>
    <button class="img_add">New</button>
    <div class="image_insert clearfix">
        <label for="userfile1" class="img-label">Image 1</label>
        <input type="file" name="userfile1" id="userfile1">
        <label for="slika_naziv_eng1">Image Title</label>
        <input type="text" name="slika_naziv_eng1" id="slika_naziv_eng1"/>
    </div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script>
        var img_add = $('.img_add');

        img_add.on('click', function(){
          var img_ins = $('.image_insert'),
          i = img_ins.length + 1;
          clon = img_ins.first().clone().insertAfter(img_ins.last());
          // clon contains the new element, so, you need to find your element
          clon.find("input").first().attr({
            'name'  : 'userfile' + i,
            'id'    : 'userfile' + i
          });
          clon.find("input").last().attr({
            'name'  : 'slika_naziv_eng' + i,
            'id'    : 'slika_naziv_eng' + i
          });
          //plus:
          clon.find(".img-label").text("Image " + i)
          // view you cosole in Chrome Ctrl + Shift + j
          console.log("Elements: " + i)
        });
    </script>
  </body>
  </html>


通过@MaoAiz+Sasha使用Jquery克隆元素
新的
图1
图像标题
var img_add=$（'.img_add'）；
img_add.on（'click'，function（）{
var img_ins=$（'.image_insert'），
i=img_英寸长度+1；
clon=img_-ins.first（）.clone（）.insertAfter（img_-ins.last（））；
//clon包含新元素，因此，您需要找到您的元素
clon.find（“输入”）.first（）.attr({
'name'：'userfile'+i，
'id'：'userfile'+i
});
clon.find（“输入”）.last（）.attr({
“姓名”：“slika_naziv_eng”+i，
“id”：“slika_naziv_eng”+i
});
//加上：
clon.find（“.img标签”）.text（“图像”+i）
//在Chrome Ctrl+Shift+j中查看您的cosole
console.log（“元素：+i”）
});

我在github中有一个演示。
您已经有了I
，这是元素的数量，因此您希望在设置属性值时使用（I+1）。其中是-$（'.img_add'）的html img元素？@wmitchell，就我个人而言，这似乎与这个问题完全无关。它只是让我们更容易在像JSFIDLE这样的例子中组合出一个soln
  <!DOCTYPE html>
  <html>
  <head>
    <title>Clone Elements with Jquery by @MaoAiz + Sasha</title>
  </head>
  <body>
    <button class="img_add">New</button>
    <div class="image_insert clearfix">
        <label for="userfile1" class="img-label">Image 1</label>
        <input type="file" name="userfile1" id="userfile1">
        <label for="slika_naziv_eng1">Image Title</label>
        <input type="text" name="slika_naziv_eng1" id="slika_naziv_eng1"/>
    </div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script>
        var img_add = $('.img_add');

        img_add.on('click', function(){
          var img_ins = $('.image_insert'),
          i = img_ins.length + 1;
          clon = img_ins.first().clone().insertAfter(img_ins.last());
          // clon contains the new element, so, you need to find your element
          clon.find("input").first().attr({
            'name'  : 'userfile' + i,
            'id'    : 'userfile' + i
          });
          clon.find("input").last().attr({
            'name'  : 'slika_naziv_eng' + i,
            'id'    : 'slika_naziv_eng' + i
          });
          //plus:
          clon.find(".img-label").text("Image " + i)
          // view you cosole in Chrome Ctrl + Shift + j
          console.log("Elements: " + i)
        });
    </script>
  </body>
  </html>