来自JS中嵌套列表项的多维数组或json对象

Question

我有一个嵌套的列表项。我想从列表项中创建一个多维数组或json对象。我试过像下面这样的东西。但我没有得到预期的产出。

列表项的深度可以更多。因此，我将在以后定义一个递归方法来完成这个任务。

演示Fiddle

HTML：

<div class="dd" id="nestable">
    <ol class="dd-list">
        <li class="dd-item" data-id="1">
            <div class="dd-handle">Sub-indicator 1</div>
            <ol class="dd-list">
                <li class="dd-item" data-id="2">                    
                    <div class="dd-handle">Sub-indicator 2</div>
                    <ol class="dd-list">
                        <li class="dd-item" data-id="3">

                            <div class="dd-handle">Sub-indicator 3</div>
                            <ol class="dd-list">
                                <li class="dd-item" data-id="4">

                                    <div class="dd-handle">Sub-indicator 4</div>
                                </li>
                            </ol>
                        </li>
                    </ol>
                </li>
                <li class="dd-item" data-id="3">

                            <div class="dd-handle">Sub-indicator 3</div>
                            <ol class="dd-list">
                                <li class="dd-item" data-id="4">

                                    <div class="dd-handle">Sub-indicator 4</div>
                                </li>
                            </ol>
                        </li>
            </ol>
        </li>
    </ol>
</div>

联署材料：

var subIndicTreeObj = {};
var tempObj = [];
var parentId = 0;
var parentId1 = 0;
var parentId2 = 0;

$('#nestable > ol > li').each(function(index, value) { 
    parentId = 0;
    parentId1 = 0;
    parentId2 = 0;

    tempObj.push({'sub_indic_id': $(this).attr('data-id'), 'parent_id': parentId});


    if ($(this).has('ol').length > 0) { 

        parentId = $(this).attr('data-id');

        $(this).find('ol > li').each(function(index1, value1) { 

            tempObj.push({'sub_indic_id': $(this).attr('data-id'), 'parent_id': parentId});


            if ($(this).has('ol').length > 0) {  

                parentId1 = $(this).attr('data-id');

                $(this).find('ol > li').each(function(index2, value2) { 

                    tempObj.push({'sub_indic_id': $(this).attr('data-id'), 'parent_id': parentId1});

                    if ($(this).has('ol').length > 0) { 


                        parentId2 = $(this).attr('data-id');

                        $(this).find('ol > li').each(function(index3, value3) { 

                            tempObj.push({'sub_indic_id': $(this).attr('data-id'), 'parent_id': parentId2});

                        });
                    }

                });
            } 
        });
    } 
});

subIndicTreeObj = tempObj;

console.log(subIndicTreeObj);

当前产出：

 [
  Object{
    sub_indic_id="1",
    parent_id=0
  },
  Object{
    sub_indic_id="2",
    parent_id="1"
  },
  Object{
    sub_indic_id="3",
    parent_id="2"
  },
  Object{
    sub_indic_id="4",
    parent_id="3"
  },
  Object{
    sub_indic_id="4",
    parent_id="2"
  },
  Object{
    sub_indic_id="3",
    parent_id="1"
  },
  Object{
    sub_indic_id="4",
    parent_id="3"
  },
  Object{
    sub_indic_id="4",
    parent_id="1"
  },
  Object{
    sub_indic_id="3",
    parent_id="1"
  },
  Object{
    sub_indic_id="4",
    parent_id="3"
  },
  Object{
    sub_indic_id="4",
    parent_id="1"
  }
]

我想要一个孩子的parent_id。但是我得到了一些列表项目的顶级parent_id。比如,

Object{
    sub_indic_id="4",
    parent_id="1"
  }

有人能帮忙找出这个问题吗？提前谢谢。

Answer 1

我不明白这是否是预期的行为，无论如何，它是递归的，而且也找到了第一个孩子。我只是在>选择器之前添加了一个ol > li。

注意，我还向data-id='0'添加了一个id="nestable"，以获得第一个父id。

编辑

有关注释中询问的>选择器的更多细节，我建议查看一些文档。我主要是从w3school那里学到的。从该链接报告

element>element选择器用于选择具有特定父元素的元素。

因此，在用ol > li编写的代码中，您检索了包含在$(this)中的每个ol的所有的li子级。

使用> ol > li，您可以检索您正在搜索的对象的直接子对象，而不是孩子的孩子。

​

var subIndicTreeObj = [];

function findLiChild($obj, parentId) {
  $obj.find('> ol > li').each(function(index1, value1) {
    subIndicTreeObj.push({
      'sub_indic_id': $(this).attr('data-id'),
      'parent_id': parentId
    });

    findOlChild($(this));
  });
}

function findOlChild($obj) {
  if ($obj.has('ol').length > 0) {
    findLiChild($obj, $obj.attr('data-id'));
  }
}

findOlChild($('#nestable'));

console.log(subIndicTreeObj);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dd" id="nestable" data-id="0">
  <ol class="dd-list">
    <li class="dd-item" data-id="1">
      <div class="dd-handle">Sub-indicator 1</div>
      <ol class="dd-list">
        <li class="dd-item" data-id="2">
          <div class="dd-handle">Sub-indicator 2</div>
          <ol class="dd-list">
            <li class="dd-item" data-id="3">

              <div class="dd-handle">Sub-indicator 3</div>
              <ol class="dd-list">
                <li class="dd-item" data-id="4">

                  <div class="dd-handle">Sub-indicator 4</div>
                </li>
              </ol>
            </li>
          </ol>
        </li>
        <li class="dd-item" data-id="3">

          <div class="dd-handle">Sub-indicator 3</div>
          <ol class="dd-list">
            <li class="dd-item" data-id="4">

              <div class="dd-handle">Sub-indicator 4</div>
            </li>
          </ol>
        </li>
      </ol>
    </li>
  </ol>
</div>

​

Answer 2

尝试一个简单的循环：

var data = [];//create the array
$('.dd-item').each(function() {//loop each item
  var parent = $(this).parent().closest('.dd-item');//get the parent
  var parent_id = 0;//set 0 if it has no parent
  if (parent.length) {
    parent_id = parent.attr('data-id');//set parent id if it has
  }
  data.push({
    parent_id: parent_id ,sub_indic_id: $(this).attr('data-id')
  });//append to the array
});
console.log(data);

演示：https://jsfiddle.net/uwqqmz86/