javascript - 如何使用 jquery 获取嵌套列表值

Question

当我点击fold2.1时，我需要获取值“fold2.1”和“fold2”，当我点击“doc 6”时，我需要获取“doc6”，“fold2.1”和“fold2” “值。

与“fold2.2”相同，我需要获取值“fol2.2”和“fold2”，并且当我单击chld“Doc 7”时，我需要获取“Doc 7”、“fol 2.2”和“遵循2”值。

HTML 文件:

<li class="favdelParentFold">
  <a href="#parentLevel1" data-toggle="collapse" class="" aria-expanded="true">
    <span class="caret-right"></span>
  </a><span class="folder"></span><span id="pfDel">fold2</span><span data-toggle="modal" data-target="#AddFavorites_ModalDel" class="trashcan"> press me</span>
  <ul class="collapse in" id="parentLevel1" aria-expanded="true">

    <li class="favorite"><a id="pfDocDel" href="">one 1</a><span data-toggle="modal" data-target="#AddFavorites_ModalDel" class="trashcan">press me</span></li>
    <li class="favorite"><a id="pfDocDel" href="">one 2</a><span data-toggle="modal" data-target="#AddFavorites_ModalDel" class="trashcan">press me</span></li>
    <li class="favorite"><a id="pfDocDel" href="">one 3</a><span data-toggle="modal" data-target="#AddFavorites_ModalDel" class="trashcan">press me</span></li>
    <!-- ROOT DOCS -->

    <li class="favdelSubFold">
      <a href="#1childlevel1" data-toggle="collapse">
        <span class="caret-right"></span></a><span class="folder">
                                                                    </span><span id="sfDel">fold2.1</span><span data-toggle="modal" data-target="#AddFavorites_ModalDel" class="trashcan">press me</span>
      <ul id="1childlevel1" class="collapse in">

        <li class="favorite">
          <a id="sfDocDel" href="https://www.cna.com" target="_blank">doc6</a><span data-toggle="modal" data-target="#AddFavorites_ModalDel" class="trashcan">press me</span></li>
      </ul>
    </li>
    <li class="favdelSubFold">
      <a href="#1childlevel2" data-toggle="collapse">
        <span class="caret-right"></span></a><span class="folder">
                                                                    </span><span id="sfDel">fold2.2</span><span data-toggle="modal" data-target="#AddFavorites_ModalDel" class="trashcan">press me</span>

      <ul id="1childlevel2" class="collapse in">

        <li class="favorite">
          <a id="sfDocDel" href="https://www.cna.com" target="_blank">doc7</a><span data-toggle="modal" data-target="#AddFavorites_ModalDel" class="trashcan">press me</span></li>

      </ul>

    </li>
  </ul>
</li>

JS脚本

$(".favdelParentFold ul li .trashcan").click(function() {
  if ($(this).parent().find('ul').length || $(this).closest('.favdelSubFold').length <1 ) return;

  var tr = $(this).prev('a').text();
  var pa = $(this).closest('.favdelParentFold').find('#pfDel').text();
  var ya = $(this).parent('#sfDocDel').text();
  alert(tr);
  alert(pa);
  alert(ya);
});

工作代码:

https://jsfiddle.net/atg5m6ym/409/

Answer 1

页面上不能有重复的 ID。这是无效的 HTML，浏览器只能访问第一个匹配项。对 id=pfDel 值使用类(以及对于每个元素的 ID 不唯一的任何其他内容)。

然后更改几行代码以使用类选择器进行 pfDel 等:

  var tr = $(this).prev('a').text();
  var ya = $(this).closest('.favdelSubFold').find('.sfDel').text();
  var pa = $(this).closest('.favdelParentFold').find('.pfDel').text();

更正示例: https://jsfiddle.net/TrueBlueAussie/atg5m6ym/413