获取所有 parent id <ul> 到数组

Question

我的html代码：

<form>
<ol>
  <li id="1" name="grandparent">Grand Parent
    <ol>
      <li id="2" name="parent">Parent
         <ol>
           <li id="3" name="child">Child
         </ol>
      </li>
      <li id="4" name="parent2">Parent2
         <ol>
           <li id="5" name="child2">Child2
         </ol>
      </li>
    </ol>
  </li>
  <li id="6" name="grandparent2">Grand Parent 2
  </li>
</ol>
</form>

在提交表单上，我想得到所有 parent 像这样：

[1] => 'grandparent', Parent

[2//li id] => 'parent', Parent => [1//id of parent]

[3] => 'child', Parent => [2]

[4] => 'parent2', Parent => [1]

[5] => 'child2', Parent => [4]

[6] => 'grandparent2', Parent

Please help me to get all parent id on javascript.

Answer 1

你期待这样的事情。我使用递归函数因此你可以很容易地扩展它，

function getJson()
{
 var finalJson = getChildLis(new Array(),$("#myform").children("ol"),"");
 alert(JSON.stringify(finalJson));
}


function getChildLis(jsonArray,currentEle,parent)
{
 $.each($(currentEle).children("li"),function(key,val){
  var curName = $(val).attr("name");
  var curId = $(val).attr("id");
  var jsonO = {};  
  jsonO[curId] = curName;
  jsonO.parent = parent;  
  jsonArray.push(jsonO);
  getChildLis(jsonArray,$(val).find("ol"),curId);
 });
 return jsonArray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<form id="myform" >
<ol>
  <li id="1" name="grandparent">Grand Parent
    <ol>
      <li id="2" name="parent">Parent
         <ol>
           <li id="3" name="child">Child
         </ol>
      </li>
      <li id="4" name="parent2">Parent2
         <ol>
           <li id="5" name="child2">Child2
         </ol>
      </li>
    </ol>
  </li>
  <li id="6" name="grandparent2">Grand Parent 2
  </li>
</ol>
<input type="button" value="show Array" onclick="getJson()" >
</form>

获取所有 parent id <ul> 到数组

get all parent id <ul> to array

html

javascript

arrays

jquery

parent