<li> 树结构遍历在 javascript/jquery 中不起作用

Question

我在 html 文档中有一段代码树结构，我想使用 javascript 遍历。 html中codetree（目录树）显示如下：

<ol id="start">
    <li>
        <label for="1">..</label>
        <input type="checkbox" id="1">
        <ol>
            <li>
                <label for="2">..</label>
                <input type="checkbox" id="2">
                <ol>
                    <li>
                        <label for="3">..</label>
                        <input type="checkbox" id="3">
                        <ol>
                            <li>
                                <label for="4">..</label>
                                <input type="checkbox" id="4">
                                <ol>
                                    <li>
                                        <label for="5">..</label>
                                        <input type="checkbox" id="5">
                                        <ol>
                                            <li class="file badfile">
                                            </li>
                                        </ol>
                                    </li>
                                </ol>
                            </li>
                            <li>
                                <label for="6">..</label>
                                <input type="checkbox" id="6">
                                <ol>
                                    <li>
                                        <label for="7">..</label>
                                        <input type="checkbox" id="7">
                                        <ol>
                                            <li class="file">
                                            </li>
                                        </ol>
                                    </li>
                                </ol>
                            </li>
                        </ol>
                    </li>
                </ol>
            </li>
        </ol>
    </li>
</ol>

如果“file”（在树的左边）不是“badfile”，我想折叠目录树，否则保持目录树展开。这些标签与我真正的代码不完全相同，但结构完全相同。 <input> 属性“checkbox”决定目录是展开还是折叠。

这是我尝试过的：

function collapse(node) {
    if ($(node > 'li').hasClass('file')) {
        if (!$(node > 'li').hasClass('badfile')) {
            $(node > 'li').addClass('hidden');
        }
        return;
    }
    else {
        $(node > 'li').each(function() {
            collapse($(this));
        })
        if (node.children(':visible').length == 0) {
            $(node).prop("checked", false);
        }
        return;
    }
}

collapse($("#start"));

崩溃完全没有反应，谁能帮我解决这个递归函数的问题？谢谢！

更新：我改成这个，还是不行，谁能看看？

function collapse(node) {
  node.children().each(function() {
    if ($(this).hasClass('file')) {
      if ($(this).hasClass('badfile')) {
        $(this).addClass('hidden');
      }
      return;
    }
    else {
      collapse($(this));
      if (node.children(':visible').length == 0) {
        node.prop('checked', false);
      }
    }
  });
}

Answer 1

1) 正如 'charlietfl' 指出的那样。你不能做 $(node > 'li') 因为 $() 的所有内容都是对象或字符串是不可能的。所以 $(node).children('li')

2) 我会建议您阅读一些关于 'DOM Tree' http://www.w3schools.com/ 的内容是很好的开始。即使 jQuery 将接受您的功能 .children() 或字符 > 将始终仅分析第一级子级（深入），因此您的最外部<li> 仅此而已。由于具有 class badfile 的对象是 node 的深层子对象，您只能执行 .find('li').each() 这将 select 所有匹配的对象，无论是直接子对象还是子对象的子对象还有更多...

function collapse(node) 
{
  node.children().each(function() 
  { 
    if ($(this).hasClass('file')) 
 {
      if ($(this).hasClass('badfile')) 
   {
        $(this).addClass('hidden');
      }
      return;
    }
    else 
 {
      collapse($(this));
      if (node.children('ol').children(':visible').length == 0)
   {
        node.children('input').prop('checked', false);
      }
   else
   {
  node.children('input').prop('checked', true);
   }
    }
  });
}

collapse($("#start"));

正如我告诉你的，检查 DOM 树是如何工作的。

.hidden
{
 overflow: hidden;
 height: 0;
 display: none;
}

<li> 树结构遍历在 javascript/jquery 中不起作用

<li> tree structure traversal not working in javascript/jquery

html

javascript

tree

jquery