jQuery，当动态添加元素时增加id号

Question

我在debutante中使用javascript，我试图提供id的自动生成机制，但它不起作用。你可以帮我吗？ 这是我的datascource：

var datascource = { 
    'id':'1' ,'name': 'Lao Lao', 
    'title': 'general manager', 
    'children': [ 
    { 'id':'2','name': 'Bo Miao', 'title': 'department manager', 'className': 'middle-level', 
     'children': [ 
     { 'id':'3','name': 'Li Jing', 'title': 'senior engineer', 'className': 'product-dept' }, 
     { 'id':'4','name': 'Li Xin', 'title': 'senior engineer', 'className': 'product-dept', 
      'children': [ 
      { 'id':'5','name': 'Ta Ta', 'title': 'engineer', 'className': 'pipeline1' }, 
      { 'id':'6','name': 'Fei Fei', 'title': 'engineer', 'className': 'pipeline1' }, 
      { 'id':'7','name': 'Xuan Xuan', 'title': 'engineer', 'className': 'pipeline1' } 
      ] 
     } 
     ] 
    }, 
    { 'id':'8','name': 'Su Miao', 'title': 'department manager', 'className': 'middle-level', 
     'children': [ 
     { 'id':'9','name': 'Pang Pang', 'title': 'senior engineer', 'className': 'rd-dept' }, 
     { 'id':'10','name': 'Hei Hei', 'title': 'senior engineer', 'className': 'rd-dept', 
      'children': [ 
      { 'id':'11','name': 'Xiang Xiang', 'title': 'UE engineer', 'className': 'frontend1' }, 
      {'id':'12', 'name': 'Dan Dan', 'title': 'engineer', 'className': 'frontend1' }, 
      { 'id':'13','name': 'Zai Zai', 'title': 'engineer', 'className': 'frontend1' } 
      ] 
     } 
     ] 
    } 
    ] 
}; 

这是用于添加节点我的功能：

$('#btn-add-input').on('click', function() { 
    $('#new-nodelist').append('<li ><input type="text" class="new-node"></li>'); 
}); 

$('#btn-remove-input').on('click', function() { 
    var inputs = $('#new-nodelist').children('li'); 
    if (inputs.length > 1) { 
    inputs.last().remove(); 
    } 
}); 

$('#btn-add-nodes').on('click', function() { 
    var $chartContainer = $('#chart-container'); 
    var nodeVals = []; 
    $('#new-nodelist').find('.new-node').each(function(index, item) { 
    var validVal = item.value.trim(); 
    if (validVal.length) { 
     nodeVals.push(validVal); 
    } 
    }); 

这是我的函数来生成的ID每个元素加入：

(function(){ 
var counter = 13; (the last id in the datascource) 
window.uniqueId = function(){ 
return counter++ 
} 
}); 

$('.new-node').each(function (i, e) { 
var name = uniqueId(); 
$(e).find(':input').each(function (j, f) { 
var id = uniqueId(); 
$(f).attr('name', name) 
.attr('id', id) 
.next() 
.attr('title', title); 
}) 
}); 

有在我目前的代码中有几个问题。你可以帮我吗 ？

Answer 1

对于你的问题的一部分，这是“我怎么找到一个JSON对象的最高ID”

我使用封闭的解决了这个问题

var getHighestID = function() { 
    var highestID = 0; 
    function searchID(jsonObj){ 
     for (var key in jsonObj) { 
     if (jsonObj.hasOwnProperty(key)) { 
      if(jsonObj[key] !== null && typeof jsonObj[key] === 'object'){ 
      searchID(jsonObj[key]); 
      }else{ 
      if(key == "id"){ 
       if(parseInt(jsonObj[key]) > parseInt(highestID)){ 
       highestID = parseInt(jsonObj[key]); 
       } 
      } 
      } 
     } 
     } 
    } 
    return { 
     calculate: function(jsonObj) { 
     searchID(jsonObj); 
     }, 
     value: function() { 
     return highestID; 
     } 
    } 
}; 

然后你只需创建对象并要求它找到最高的ID。

var highestID = getHighestID(); 
highestID.calculate(datascource); 
var currentHighestID = highestID.value(); 

如果必须多次执行此操作并且删除行。你也应该添加一个reset（）函数。

下面是一个JSFIDDLE