javascript - 从 <ul>、<li> 树格式获取值

Question

我有以下 TreeView :

ul {
  list-style-type: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />

<ul id="myTreeSelector" onClick="getPath()">
  <li>
    <span class="caret folder-selector"><i class="fa fa-folder"></i> first_folder</span>
    <ul class="nested">
      <li class="file"><i class="fa fa-file"></i> app1.dat</li>
      <li class="file"><i class="fa fa-file"></i> app2.dat</li>
      <li>
        <span class="caret folder-selector"><i class="fa fa-folder"></i> second_folder</span>
        <ul class="nested">
          <li class="file"><i class="fa fa-file"></i> ret.dat</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

这会生成一个像这样的文件夹树:

我正在寻找的是，当我单击任何文件或文件夹时，获取“完整文件/文件夹路径”。这意味着:

• 如果我点击 app1.dat，我想要的输出是:first_folder/app1.dat
• 如果我点击 second_folder，我想要的输出是:first_folder/second_folder
• 如果我点击 ret.dat，我想要的输出是:first_folder/second_folder/ret.dat

我怎样才能实现这个目标？我尝试但没有运气获得该值:

function getPath() {
    var value = $("#myTreeSelector").val()
    console.log(value)
}

编辑:树可以有超过 2 个级别，这只是一个缩小的示例。

Answer 1

这里是通用代码，您所需要做的就是向 li 添加事件(使用事件委托(delegate))并使用作为所选 li 元素的父级的 li 元素的父级。

$(function() {
  $('#myTreeSelector').on('click', 'li', function() {
     var item = $(this);
     var path = [];
     if (item.is('.file')) {
        path.push(item.text().trim());
     } else {
        path.push(item.find('> .folder-selector').text().trim() + '/');
     }
     var parents = item.parents('#myTreeSelector li');
     path = parents.map(function() {
        return $(this).find('> .folder-selector').text().trim();
     }).get().reverse().concat(path);
     console.log(path.join('/'));
     return false;
  });
});
     

ul {
  list-style-type: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />

<ul id="myTreeSelector">
  <li>
    <span class="caret folder-selector"><i class="fa fa-folder"></i> first_folder</span>
    <ul class="nested">
      <li class="file"><i class="fa fa-file"></i> app1.dat</li>
      <li class="file"><i class="fa fa-file"></i> app2.dat</li>
      <li>
        <span class="caret folder-selector"><i class="fa fa-folder"></i> second_folder</span>
        <ul class="nested">
          <li class="file"><i class="fa fa-file"></i> ret.dat</li>
          <li><span class="caret folder-selector"><i class="fa fa-folder"></i> third_folder</span></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>