jquery .each 循环奇怪的行为

Question

您好，我有以下代码
html

<table id="tbPermission">
  <tr>
    <th>User ID</th>
    <th>User Name</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Test1</td>
  </tr>
<tr>
    <td>2</td>
    <td>Test2</td>
  </tr>
<tr>
    <td>3</td>
    <td>Test3</td>
  </tr>
</table>

脚本

var trArray = [];
var tdArray = [];
var reruiredObj = {"UserID":null,
                   "UserName":null
                  };
var first;
var second;
$('#tbPermission tr').each(function () {

    $(this).find('td').each(function (index) {
        //alert(index+'-'+ $(this).html());
        //alert(index);
        if(index == 0){
            first = $(this).html();
        }
        else{
            second = $(this).html();

        }
        //alert(JSON.stringify(reruiredObj));
    });
    alert(first+'-'+second)
    reruiredObj['UserID'] = first;
    reruiredObj['UserName'] = second;
    trArray.push(reruiredObj);


});
alert(JSON.stringify(trArray));

Demo Here
我的问题为什么 first 和 second 在 undefined 中第一次警报，为什么是
[{"UserID":"3","UserName":"Test3"},{"UserID":"3","UserName":"Test3"},{"UserID":"3","UserName":"Test3"},{"UserID":"3","UserName":"Test3"}]
我想要的输出是
[{"UserID":"1","UserName":"Test1"},{"UserID":"2","UserName":"Test2"},{"UserID":"3","UserName":"Test3"}]

Answer 1

第一个警报给出未定义，因为 table 的第一行不包含任何 td 元素。

要从循环中排除第一行：

$('#tbPermission tr').each(function (i) {    
  if (i != 0) {    
    // execute ..
  }
});

至于数组，在每个循环中尝试这个：

var reruiredObj = { "UserID": first , "UserName":second };

勾选DEMO

Answer 2

您的 reruiredObj 对象的范围不正确，这就是您三次获得相同对象的原因。试试这个：

var trArray = [];
var tdArray = [];
var first;
var second;
$('#tbPermission tr:gt(0)').each(function () {
    var reruiredObj = {
        "UserID": null,
            "UserName": null
    };
    first = $(this).find('td').eq(0).html();
    second = $(this).find('td').eq(1).html();
    reruiredObj['UserID'] = first;
    reruiredObj['UserName'] = second;
    trArray.push(reruiredObj);
});
console.log(JSON.stringify(trArray));

jsFiddle example

而未定义的值来自迭代你不想要的第一行，可以用 tr:gt(0)

忽略

Answer 3

以下适合我。

因为你的第一个 tr 没有 td 它给出了未定义的错误。试试下面一个

<table id="tbPermission">
 <thead>
   <tr>
    <th>User ID</th>
    <th>User Name</th>
  </tr>
 </thead>
  <tbody>
  <tr>
    <td>1</td>
    <td>Test1</td>
  </tr>
<tr>
    <td>2</td>
    <td>Test2</td>
  </tr>
<tr>
    <td>3</td>
    <td>Test3</td>
  </tr>
</tbody>
</table> 




    <script>
$(function () {
    var trArray = [];
var tdArray = [];
var reruiredObj = {"UserID":null,
                   "UserName":null
                  };


jsonObj = [];                 
var first;
var second;
$('#tbPermission tbody tr').each(function () {

    $(this).find('td').each(function (index) {
        //alert(index+'-'+ $(this).html());
        //alert(index);
        if(index == 0){
            first = $(this).html();
        }
        else{
            second = $(this).html();

        }
        //alert(JSON.stringify(reruiredObj));
    });
    alert(first+'-'+second)
    item = {}
    item ["UserID"] = first;
    item ["UserName"] = second;
    jsonObj.push(item);


});
console.log(jsonObj);
});
  </script>

警报 jsonObj。这给出了所需的结果。

jquery .each 循环奇怪的行为

jquery .each loop odd behaviour

javascript

each

jquery