javascript将dom结构转换为哈希对象

Question

我需要从 DOM 结构的选定元素中生成一个合理的散列:

    <div name="stuff" class="category">
        <div class="category" name="Person">
            <div class="option selected" >Kennedy</div>
        </div>
        <div class="category" name="fruit">
            <div class="option" >Apple</div>
            <div class="option selected" >Banana</div>
        </div>
        <div class="category" name="Org">
            <div class="option" name="Association">
                <div class="option" >NBA</div>
                <div class="option selected" >MPAA</div>
            </div>
            <div class="option" name="Federation">
                <div class="option" >Russian</div>
                <div class="option" >United Federation of Planets</div>
            </div>
        </div>
    </div>

    <div name="attributes" class="category">
        <div class="category" name="color">
            <div class="option selected" >red</div>
            <div class="option" >yellow</div>
        </div>
        <div class="category" name="time">
            <div class="option selected" >future</div>
            <div class="option" >past</div>
        </div>
    </div>

从此处选定的元素中获取合理哈希值的最简单方法是什么？

分类有嵌套，嵌套到什么程度是不确定的。

散列应如下所示:

{
    "stuff" : {
        "Person": "Kennedy",
        "fruit": "Banana",
        "Org" : {
            "Association": "MPAA",
        }
    },
    "attributes" : {
        "color" : "red",
        "time" : "future"
    }
}

我该怎么做？谢谢。

我今天又拍了一张:我注意到的一些事情是来自上面的 DOM 的错误。 Association 和 Federation 应该是类别，而不是选项。按理说，如果它们是选项(例如，如果 Federation 和 Association 是互斥的)，那么 Association 将被“选中”。

假设它们是类别，这是我的代码:

function DOMtoJSON(el){
  el.find('div.option:not(.selected)').remove();
  el.find('div.option:empty').remove();

  var createObj = function (thisCategory, parentObj) {
    if (thisCategory.children('.option').length > 0) {
      parentObj[thisCategory.attr('name')] = thisCategory.children('.option').text();
    }
    if (thisCategory.children('.category').length > 0) {
      parentObj[thisCategory.attr('name')] = {};
      thisCategory.children('.category').each(function () {
        createObj($(this), parentObj[thisCategory.attr('name')]);
      });
    } else {
      return parentObj;
    }
  }
  var obj = {}
      el.children('.category').each(function () {
        createObj($(this), obj)
      });

  return obj;
}


var root = DOMtoJSON($('#root'));
document.getElementById('root').innerHTML = JSON.stringify(root);

有人可以给我任何批评。那太好了

Answer 1

我已经在此处在线提供了一个有效但笨拙的解决方案:http://jsfiddle.net/btJD6/2/

代码如下:

function childrenWithAttribute(el,tagName,attrName){
  if (!tagName)  tagName = '*';
  if (!attrName) attrName = 'name';
  var kids = [];
  for (var i=0,len=el.childNodes.length;i<len;++i){
    var kid = el.childNodes[i];
    if (tagName!='*' && kid.tagName != tagName) continue;
    if (kid.nodeType!=1) continue;
    if (!kid.hasAttribute(attrName)) continue;
    kids.push(kid);
  }
  return kids;
}

function objectify(el,kidTags,kidAttr){
  if (!kidTags) kidTags = '*';
  if (!kidAttr) kidAttr = 'name';
  var kids = childrenWithAttribute(el,kidTags,kidAttr);
  if (kids.length){
    var obj = {};
    for (var i=0,len=kids.length;i<len;++i){
      var key = kids[i].getAttribute(kidAttr);
      obj[key] = objectify(kids[i],kidTags,kidAttr);
    }
    return obj;
  }else{
    return (el.getElementsByClassName('selected')[0] ||
           el.getElementsByClassName('option')[0]   ||
           el.getElementsByTagName('*')[0]).textContent;
  }
}
var root = objectify( document.getElementById('root') );
document.getElementById('output').innerHTML = JSON.stringify(root);

这是输出(为显示改进了格式):

{
  "stuff":{
    "Person":"Kennedy",
    "fruit":"Banana",
    "Org":{
      "Association":"MPAA",
      "Federation":"Russian"
    }
  },
  "attributes":{
    "color":"red",
    "time":"future"
  }
}

它与您想要的输出不完全匹配——它包括“联合”选项，即使没有“选择”任何“选项”——但它让你完成了 90% 的事情。现在您可以自己完成了。