javascript - 从 、 树格式中获取值

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

我怎样才能归档这个？我试图没有运气来获得值(value):

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>