以下内容几乎有效，但如果我删除 <a> json 因空节点 name:" " 而中断而且我相信我正在创建一个数组，而我需要以下格式的 json 。这是 jsFiddle也是(请参阅下面我正在寻找的输出的结果)。

我想做的是生成一个可以从嵌套列表中读取的对象，以便生成思维导图 (D3) like this

HTML

<div id="tree"> 
<ul class="sortable"> 
  <li><a href="http://google.com">flare</a> 
    <ul class="sortable"> 
      <li>analytics 
        <ul class="sortable"> 
          <li><a href="http://google.com">cluster</a> 
            <ul class="sortable"> 
              <li><a href="http://google.com">AgglomerativeCluster</a></li> 
              <li><a href="http://google.com">CommunityStructure</a></li> 
              <li><a href="http://google.com">HierarchicalCluster</a></li> 
              <li><a href="http://google.com">MergeEdge</a></li> 
            </ul> 
          </li> 
          <li><a href="http://google.com">graph</a> 
            <ul class="sortable"> 
              <li><a href="http://google.com">BetweennessCentrality</a></li> 
              <li><a href="http://google.com">LinkDistance</a></li> 
              <li><a href="http://google.com">MaxFlowMinCut</a></li> 
              <li><a href="http://google.com">ShortestPaths</a></li> 
              <li><a href="http://google.com">SpanningTree</a></li> 
            </ul> 
          </li> 
          <li><a href="http://google.com">optimization</a> 
            <ul class="sortable"> 
              <li><a href="http://google.com">AspectRatioBanker</a></li> 
            </ul> 
          </li> 
        </ul> 
      </li> 
    </ul> 
  </li> 
  <li><a href="http://google.com">Pippo</a></li> 
  <li><a href="http://google.com">buonanotte</a></li> 
  <li><a href="http://google.com">Avantieri</a></li> 
</ul> 
</div> 
<div id="d" style="margin-top: 40px; padding-top: 20px;">Output:<br><br><pre></pre></div> 
 
 
<div id="d" style="margin-top: 40px; padding-top: 20px;">Output:<br><br><pre></pre></div> 
<div id="json_results" style="margin-top: 40px; padding-top: 20px;"> 
Needs to become: 
  <pre style="padding-top: 20px;"> 
var root = JSON.parse( ' { 
 "name": "flare", 
 "children": [ 
  { 
   "name": "analytics", 
   "children": [ 
    { 
     "name": "cluster", 
     "children": [ 
      {"name": "AgglomerativeCluster","url":"http://google.com"}, 
      {"name": "CommunityStructure"}, 
      {"name": "HierarchicalCluster"}, 
      {"name": "MergeEdge"} 
     ] 
    }, 
    { 
     "name": "graph", 
     "children": [ 
      {"name": "BetweennessCentrality" }, 
      {"name": "LinkDistance" }, 
      {"name": "MaxFlowMinCut" }, 
      {"name": "ShortestPaths" }, 
      {"name": "SpanningTree" } 
     ] 
    }, 
    { 
     "name": "optimization", 
     "children": [ 
      {"name": "AspectRatioBanker" } 
     ] 
    } 
   ] 
  }, 
  {"name": "Pippo"}, 
  {"name": "buonanotte" }, 
  {"name": "Avantieri"} 
 ] 
} ') ; 
  </pre> 
</div> 

JS

$(document).ready(function () { 
    var out = []; 
    function processOneLi(node) {        
        var aNode = node.children("a:first"); 
        var retVal = { 
            "name": aNode.text(), 
            "url": aNode.attr("href") 
        }; 
        node.find("> .sortable > li").each(function() { 
            if (!retVal.hasOwnProperty("children")) { 
                retVal.children = []; 
            } 
            retVal.children.push(processOneLi($(this))); 
        }); 
        return retVal; 
    } 
    $("#tree > ul > li").each(function() { 
        out.push(processOneLi($(this))); 
    }); 
    $('#d pre').text(JSON.stringify(out, null, 2)); 
 
}); 

json 应该变成:

var root = JSON.parse( ' { 
 "name": "flare", 
 "children": [ 
  { 
   "name": "analytics", 
   "children": [ 
    { 
     "name": "cluster", 
     "children": [ 
      {"name": "AgglomerativeCluster","url":"http://google.com"}, 
      {"name": "CommunityStructure"}, 
      {"name": "HierarchicalCluster"}, 
      {"name": "MergeEdge"} 
     ] 
    }, 
    { 
     "name": "graph", 
     "children": [ 
      {"name": "BetweennessCentrality" }, 
      {"name": "LinkDistance" }, 
      {"name": "MaxFlowMinCut" }, 
      {"name": "ShortestPaths" }, 
      {"name": "SpanningTree" } 
     ] 
    }, 
    { 
     "name": "optimization", 
     "children": [ 
      {"name": "AspectRatioBanker" } 
     ] 
    } 
   ] 
  }, 
  {"name": "Pippo"}, 
  {"name": "buonanotte" }, 
  {"name": "Avantieri"} 
 ] 
} ') ; 

但这就是我得到的:

[ 
  { 
    "name": "flare", 
    "url": "http://google.com", 
    "children": [ 
      { 
        "name": "", 
        "children": [ 
          { 
            "name": "cluster", 
            "url": "http://google.com", 
            "children": [ 
              { 
                "name": "AgglomerativeCluster", 
                "url": "http://google.com" 
              }, 
              { 
                "name": "CommunityStructure", 
                "url": "http://google.com" 
              }, 
              { 
                "name": "HierarchicalCluster", 
                "url": "http://google.com" 
              }, 
              { 
                "name": "MergeEdge", 
                "url": "http://google.com" 
              } 
            ] 
          }, 
          { 
            "name": "graph", 
            "url": "http://google.com", 
            "children": [ 
              { 
                "name": "BetweennessCentrality", 
                "url": "http://google.com" 
              }, 
              { 
                "name": "LinkDistance", 
                "url": "http://google.com" 
              }, 
              { 
                "name": "MaxFlowMinCut", 
                "url": "http://google.com" 
              }, 
              { 
                "name": "ShortestPaths", 
                "url": "http://google.com" 
              }, 
              { 
                "name": "SpanningTree", 
                "url": "http://google.com" 
              } 
            ] 
          }, 
          { 
            "name": "optimization", 
            "url": "http://google.com", 
            "children": [ 
              { 
                "name": "AspectRatioBanker", 
                "url": "http://google.com" 
              } 
            ] 
          } 
        ] 
      } 
    ] 
  }, 
  { 
    "name": "Pippo", 
    "url": "http://google.com" 
  }, 
  { 
    "name": "buonanotte", 
    "url": "http://google.com" 
  }, 
  { 
    "name": "Avantieri", 
    "url": "http://google.com" 
  } 
] 

这是 jsFiddle (请参阅下面我正在寻找的输出结果)

请您参考如下方法:

一个小的递归函数就可以了:

function listToObject(list) { 
  return $(list).first().children("li").map(function () { 
    var $this = $(this), $name = $this.children("a").first(); 
    return { 
                            // see http://stackoverflow.com/a/8851526 
      name: $name.text() || $this.clone().children().remove().end().text().trim(), 
      url: $name.attr("href"), 
      children: listToObject($this.children("ul")) 
    }; 
  }).toArray(); 
} 
 
var output = listToObject($("#tree > ul")); 
console.log(output);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="tree"> 
  <ul class="sortable"> 
    <li><a href="http://google.com">flare</a> 
      <ul class="sortable"> 
        <li>analytics 
          <ul class="sortable"> 
            <li><a href="http://google.com">cluster</a> 
              <ul class="sortable"> 
                <li><a href="http://google.com">AgglomerativeCluster</a></li> 
                <li><a href="http://google.com">CommunityStructure</a></li> 
                <li><a href="http://google.com">HierarchicalCluster</a></li> 
                <li><a href="http://google.com">MergeEdge</a></li> 
              </ul> 
            </li> 
            <li><a href="http://google.com">graph</a> 
              <ul class="sortable"> 
                <li><a href="http://google.com">BetweennessCentrality</a></li> 
                <li><a href="http://google.com">LinkDistance</a></li> 
                <li><a href="http://google.com">MaxFlowMinCut</a></li> 
                <li><a href="http://google.com">ShortestPaths</a></li> 
                <li><a href="http://google.com">SpanningTree</a></li> 
              </ul> 
            </li> 
            <li><a href="http://google.com">optimization</a> 
              <ul class="sortable"> 
                <li><a href="http://google.com">AspectRatioBanker</a></li> 
              </ul> 
            </li> 
          </ul> 
        </li> 
      </ul> 
    </li> 
    <li><a href="http://google.com">Pippo</a></li> 
    <li><a href="http://google.com">buonanotte</a></li> 
    <li><a href="http://google.com">Avantieri</a></li> 
  </ul> 
</div>

输出比您要求的要严格一些。每个对象都有一个 url 和 children，即使是空的。这实际上会让处理变得更容易。