Question

我正在使用JQuery.each迭代某些项目，但我想知道何时停止。

以下是我的代码：

$j(".form-builder").each(function(){
  data_json+='{ "type":"'+$j(this).attr("type")+'"';
  // IF LAST ITERATION
  // data_json += '}';
  // ELSE
  //data_json+='},';
});

我怎么能弄清楚它是否是最后一次迭代？

Answer 1

each中回调的第一个参数是数组中的索引。您可以将其与数组的长度进行比较。

但是，由于您似乎正在尝试构建一个json字符串，我只想构建一个javascript对象然后JSON.stringify它并为您省去麻烦。

示例：

var arr = [];
$j(".form-builder").each(function(){
    arr.push({ type: $j(this).attr("type") });
});
var data_json = JSON.stringify(arr);

要证明这会产生相同的结果（保留一些不重要的空白区域）作为手动构建字符串（以及使用新代码段功能的借口）：

＆＃13;

$j = $;
// Built as an array of objects and then stringify
var arr = [];
$j(".form-builder").each(function(){
    arr.push({ type: $j(this).attr("type") });
});
var data_json = JSON.stringify(arr);
alert("built as an array: " + data_json);

// Built with string concat
var items = $j(".form-builder");
var count = items.length;
data_json = "[";
items.each(function(i){
  data_json+='{ "type":"'+$j(this).attr("type")+'"';
  if (i<count -1) {
     data_json+='},';
  }
  else {
     data_json += '}';
  }
});
data_json += "]";
alert("built with string concat: " + data_json);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-builder" type="foo"></div>
<div class="form-builder" type="bar"></div>
<div class="form-builder" type="la"></div>
<div class="form-builder" type="lala"></div>

＆＃13;

Answer 2

您可以在循环期间增加计数，并将其与项目总数进行比较。

var items = $j(".form-builder");
var count = items.length;

items.each(function(i){
  data_json+='{ "type":"'+$j(this).attr("type")+'"';
  if (i<count-1) {
     data_json+='},';
  }
  else {
     data_json += '}';
  }
});

这就是说你永远不应该像这样构建JSON。相反，请参考Matt Burland的答案，因为这是一种更好的方式。

Answer 3

使用计数器计算迭代次数并与元素计数进行比较

＆＃13;

    var data_json = '';
	$(".form-builder").each(function(index, data){
      data_json+='{ "type":"'+$(this).attr("type")+'"';
      if (index + 1 == $(".form-builder").length) {
        alert('Last element is ' + (index + 1));
      }
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type='text' class='form-builder'/>
<input type='text' class='form-builder'/>
<input type='text' class='form-builder'/>
<input type='text' class='form-builder'/>
<input type='text' class='form-builder'/>

＆＃13;

如何确定这是否是＆＃34; JQuery.each＆＃34;中的最后一个迭代项。

3 个答案: