jQuery,动态追加元素时增加id号

时间:2016-08-30 14:24:06

标签: javascript jquery

我在javascript中首次亮相,我试图提供id的自动生成机制,但它不起作用。你能帮助我吗? 这是我的数据源:

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

我当前的代码有几个问题。你能救我吗?

1 个答案:

答案 0 :(得分:0)

对于您的问题&#34;我如何在JSON对象中找到最高ID&#34;

我通过使用闭包来解决它

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