在另一个div中为某些div编号

Question

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我得到了这个函数，我在复制函数中调用但它会为每个div设置相同的数字.count

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

});
}

我想要它做的是用那个没有隐藏1,2,3等等的类对div进行编号。

Answer 1

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如果您不想引用$('#main_div')，请使用单一选择器而不是链接 find() 。

$('#main_div .count')

Answer 2

使用.count上下文查找this元素，否则text将应用于所有.count元素

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

  });
}
divcounter();

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/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>

使用jQuery.find

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/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>

Answer 3

function divcounter() {
  $('.count').each(function(i,v) {
    $(this).text( i+1 );

  });
}
divcounter();

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/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>

使用index然后加1，因为它是基数0