Question

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

列表项的深度可以更多。所以，我将定义一个递归方法，以便稍后执行此操作。

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>

JS：

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学到的。从该链接报告

元素＆gt;元素选择器用于选择具有特定父元素的元素。

因此，在使用ol > li的代码中，您正在重新审核li中包含的每个ol的{{1}}个孩子。

使用$(this)，您可以检索您正在搜索的对象的直接子项，而不是孩子的孩子。

＆＃13;
＆＃13;
> ol > li
＆＃13;
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);
＆＃13;
＆＃13;
＆＃13;

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/

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

2 个答案: