Question

我有这个HTML：

<div class="info">
    <div class="form-group">
        <label class="control-label col-sm-2">Title</label>
            <div class="col-xs-10 col-sm-8">
                <input id="titleInfo" class="form-control" type="text" placeholder="Title">
            </div>
        <div class="col-xs-1 col-sm-1">
            <button class="btn btn-default remove_field"><i class="fa fa-remove"></i></button>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-sm-2">Text</label>
        <div class="col-xs-10 col-sm-8">
            <textarea id="textInfo" class="form-control" type="text" placeholder="..."></textarea>
        </div>
    </div>
</div>

进入我的jsp我有很多这个：

<div class="info">
    ...
</div>
<div class="info">
    ...
</div>
<div class="info">
    ...
</div>

现在，我将按升序改变每个div的id标签： titleInfo 和 textInfo info 。

<div class="info">
    ..<input id="titleInfo1"..
    ..<textarea id="textInfo1"..
</div>
<div class="info">
    ..<input id="titleInfo2"..
    ..<textarea id="textInfo2"..
</div>
<div class="info">
    ..<input id="titleInfo3"..
    ..<textarea id="textInfo3"..
</div>

等等。

我想按类 info 进行迭代：

var x = 1;
$(".info").each(function() {
    //Now, I don't know how to change the ids
    x++;       
});

Answer 1

您需要将代码更新为以下

var x = 1;
$(".info").each(function() {
    var elems = $(this).find(".form-control"); // get all the input elements with class form-control
    elems.each(function() { // iterate over the elements
         $(this).attr("id", $(this).attr("id") + x); // update id
    }); 
    x++;       
});

<强>更新

var x = 1;
    $(".info").each(function() {
        var elems = $(this).find(".form-control"); // get all the input elements with class form-control
        $(elems[0]).attr("id", "titleInfo" + x);
        $(elems[1]).attr("id", "textInfo" + x);
        x++;       
    });

Answer 2

您应该在生成这些块的循环控件中真正执行此服务器端。为了回答，你走了。

$(".info").each(function(index) {

    var $title = $(this).find("#titleInfo");
    var $text = $(this).find("#textInfo");
    $title[0].id += (index+1);
    $text[0].id += (index+1);
});

也可以look at this demo。

Answer 3

找到以下代码段。

＆＃13;

var x = 1;
$(".info").each(function() {
 var ele=$(this).find('.form-control');
  ele.each(function(){
     setId($(this),x)
   })
    x++;       
});

function setId(ele,x){
  ele.attr('id',ele.attr('id')+x)
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="info">
    <div class="form-group">
        <label class="control-label col-sm-2">Title</label>
            <div class="col-xs-10 col-sm-8">
                <input id="titleInfo" class="form-control" type="text" placeholder="Title">
            </div>
        <div class="col-xs-1 col-sm-1">
            <button class="btn btn-default remove_field"><i class="fa fa-remove"></i></button>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-sm-2">Text</label>
        <div class="col-xs-10 col-sm-8">
            <textarea id="textInfo" class="form-control" type="text" placeholder="..."></textarea>
        </div>
    </div>
</div>

＆＃13;

这也是一样的。

脚本

var x = 1;
$(".info").each(function() {
 var ele=$(this).find('.form-control');
  ele.each(function(){
      $(this).attr('id',$(this).attr('id')+x)
   })
    x++;       
});

如何更改按类迭代的id值

3 个答案: