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的错误。协会和联合会应该是类别，而不是选项。按理说，如果他们是选项（例如联邦和协会是相互排斥的），那么协会将被“选中”。

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

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

您可以使用此jquery插件执行此操作jQuery xmlObjectifier

Answer 2

我在网上提出了一个工作性的，如果笨重的解决方案：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％的选择权。现在你可以自己完成它。

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

2 个答案: