Mgr February 2016

How to get nested list values using jquery

When i click on fold2.1 i need to get values "fold2.1" and "fold2" and also when i click on "doc 6" i need to get "doc6" , "fold2.1" and "fold2" values.

same as "fold2.2" i need to get values "fol2.2" and "fold2" and also when i click on chld "Doc 7" i need to get "Doc 7 " , "fol 2.2" and "fol2" values.

HTML File:

<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        

Answers


Gone Coding February 2016

You cannot have duplicate IDs on a page. That is invalid HTML and the browser can only access the first match. Use a class for the id=pfDel values (and for anything else that has IDs that are not unique per element).

A few lines of your code then changes to use a class selector for pfDel etc:

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

Corrected sample: https://jsfiddle.net/TrueBlueAussie/atg5m6ym/413

Post Status

Asked in February 2016
Viewed 3,049 times
Voted 4
Answered 1 times

Search




Leave an answer