javascript - How to get nested list values using jquery -


when click on fold2.1 need values "fold2.1" , "fold2" , when click on "doc 6" need "doc6" , "fold2.1" , "fold2" values.

same "fold2.2" need values "fol2.2" , "fold2" , when click on chld "doc 7" need "doc 7 " , "fol 2.2" , "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" 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 script

$(".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); }); 

working code:

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

you cannot have duplicate ids on page. invalid html , browser can access first match. use class id=pfdel values (and else has ids not unique per element).

a few lines of code changes use class selector 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


Comments

Popular posts from this blog

javascript - jQuery: Add class depending on URL in the best way -

caching - How to check if a url path exists in the service worker cache -

Redirect to a HTTPS version using .htaccess -