javascript - 对另一个 div 内的某些 div 进行编号

Question

我有一个可以复制的表单，我想要的是在它前面添加编号，所以结果与此类似

.form_div div {
  display: inline-block;
  margin: 5px;
}

<div id="main_div">
	<div class="form_div">
		<div class="count">1</div>
		<div><input name="name_1" id="name_1" value="" type="text" /></div>
	</div>
	<div class="form_div">
		<div class="count">2</div>
		<div class="form_div"><input name="name_2" id="name_2" value="" type="text" /></div>
	</div>
  <div class="form_div">
		<div class="count">3</div>
		<div><input name="name_3" id="name_3" value="" type="text" /></div>
	</div>
</div>

我在重复函数中调用了这个函数，但它会为每个具有 .count 类的 div 设置相同的数字

function divcounter(){
var numbercounter = 1;
$('#main_div').find('.count').each(function(){
    var innerDivId = $(this).attr('id');
    $(".count").text(numbercounter ++);

});
}

我想要它做的是用该类对未隐藏的 div 进行编号 1、2、3 等等。

Answer 1

您需要使用 this 来引用 each() 中的当前元素。 方法。

function divcounter(){
    var numbercounter = 1;
    $('#main_div').find('.count').each(function(){
        var innerDivId = $(this).attr('id');
        $(this).text(numbercounter++);
        //^^^^-----------here--------
    });
}

function divcounter() {
  var numbercounter = 1;
  $('#main_div').find('.count').each(function() {
    var innerDivId = $(this).attr('id');
    $(this).text(numbercounter++);
    //^^^^-----------here--------
  });
}
divcounter();

.form_div div {
  display: inline-block;
  margin: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main_div">
  <div class="form_div">
    <div class="count">1</div>
    <div>
      <input name="name_1" id="name_1" value="" type="text" />
    </div>
  </div>
  <div class="form_div">
    <div class="count">2</div>
    <div class="form_div">
      <input name="name_2" id="name_2" value="" type="text" />
    </div>
  </div>
  <div class="form_div">
    <div class="count">3</div>
    <div>
      <input name="name_3" id="name_3" value="" type="text" />
    </div>
  </div>
</div>

<小时/>

您甚至可以通过在回调函数中使用索引参数来避免计数器变量。

function divcounter(){
    $('#main_div').find('.count').each(function(i){
        //--------------------------------------^^^----
        var innerDivId = $(this).attr('id');
        $(this).text(i + 1);
        //^^^^-------^^^^^^----here--------
    });
}

function divcounter() {
  $('#main_div').find('.count').each(function(i) {
    //--------------------------------------^^^----
    var innerDivId = $(this).attr('id');
    $(this).text(i + 1);
    //^^^^-------^^^^^^----here--------
  });
}
divcounter();

.form_div div {
  display: inline-block;
  margin: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main_div">
  <div class="form_div">
    <div class="count">1</div>
    <div>
      <input name="name_1" id="name_1" value="" type="text" />
    </div>
  </div>
  <div class="form_div">
    <div class="count">2</div>
    <div class="form_div">
      <input name="name_2" id="name_2" value="" type="text" />
    </div>
  </div>
  <div class="form_div">
    <div class="count">3</div>
    <div>
      <input name="name_3" id="name_3" value="" type="text" />
    </div>
  </div>
</div>

<小时/>

尽管使用单个选择器而不是链式 find() 如果您不想引用任何 $('#main_div')。

$('#main_div .count')