如何通過

Question

類

改變的值id迭代我有這個網站：

<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> 

現在，我會改變ID標籤：titleInfo and textInfo每個div的分類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> 

等等。

我想通過類信息迭代：

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

你真的應該做的這個服務器si de，在你所擁有的循環控制中產生這些塊。爲了回答，你走了。

$(".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

找到下面的代碼片段。

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) 
 
    }

<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>

這也做了同樣的。

Script

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