如何使用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”和“ fol2”值。

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都不唯一的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