如何确定这是否是“JQuery.each”中的最后一个迭代项答案

【问题标题】：How to determine if this is the last iterated item in "JQuery.each"如何确定这是否是“JQuery.each”中的最后一个迭代项
【发布时间】：2014-09-17 23:56:31
【问题描述】：

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

这是我现在的代码：

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

我怎么知道它是否是最后一次迭代？

【问题讨论】：

Last element in .each() set 的可能重复项
您为什么尝试手动构建 JSON 而不是使用JSON.stringfy？如果你以正确的方式做我，你就不必知道最后一次迭代。
@isherwood：同意所提出的问题是一个骗子，但这仅仅是因为 OP 提出了错误的问题。问题应该是如何从一堆 html 元素中构建一个 json 字符串（这也可能是一个骗子）。

标签： jquery json each

【解决方案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);

为了证明这将产生与手动构建字符串相同的结果（节省一些不重要的空白）（并作为使用新的 sn-p 函数的借口）：

$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);

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

【讨论】：

我尝试这样做，但我将它用于“Visualforce 页面”，它有自己的前端语言，并且有许多自动生成的字段。这就是为什么我要迭代具有特定类的项目。
@HasanKhatib 这仍然只适用于 form-builder 类的项目。这里的变化在于以正确的方式（不是手动）构建 JSON 字符串。
@HasanKhatib：嗯？我看不出这如何使手动构建 json 字符串比构建 javascript 对象更好。尝试自己手动构建 json 字符串很少是一个好主意。
@mike-brant 是的，我只想要“form-builder”的项目，我想保存这些特定项目的数据。
@HasanKhatib：如您所见，$j(".form-builder").each(function(){ 行根本没有改变。它仍在迭代具有 form-builder 类的元素。

【解决方案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 的答案，因为这是一种更好的方法。

【讨论】：

由于.each 中回调的第一个参数是索引，所以i 是多余的。你可以做到items.each(function(i){...
感谢您的提示，我已经调整了答案
由于这个答案得到了关注（2 票赞成），最好添加一条注释，说明您应该永远像这样构建 JSON。
好点，我已经编辑了我的答案。我完全同意@MattBurland 的回答是实现这一目标的更好方法
还请注意，您的情况并不完全正确。它应该是if(i<count-1)，因为i 将从0 开始。

【解决方案3】：

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

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

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

【讨论】：