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:
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
Post a Comment