jQuery - Get path of nested list's child

Question

I've got the next list in my webpage:

• item1
• item2
  • superitem1
    • eliteitem1
    • eliteitem2
  • superitem3
  • superitem4
• item3
• item4

Now i want jQuery to return the full path from UL to LI
Example: If i click eliteitem2 it will return: item2/superitem1/eliteitem2


I already tried multiple things with:

$(this).parent().text(); <

But i can't get it to work, i don't need a function that only work for eliteitem2,
it should work for any LI and return the whole path...

//HTML
<ul class="list-unstyled">
    <li id="mapdb1">
        <a class="expandable">
            <span class="foldername one">mapdb1</span> 
            <span class="glyphicon glyphicon-play"></span>
        </a>
        <ul class="list-unstyled">
            <li id="somemap">
                <a class="expandable">
                    <span class="foldername two">somemap</span>
                    <span class="glyphicon glyphicon-play"></span>
                </a>
            </li>
        </ul>
    </li>
    <li id="mapdb2">
        <a class="expandable">
            <span class="foldername one">mapdb2</span> 
            <span class="glyphicon glyphicon-play"></span>
        </a>
        <ul class="list-unstyled">
        <li id="mapjeinner">
            <a class="expandable"><span class="foldername two">mapjeinner</span> <span class="glyphicon glyphicon-play"></span></a>
            <ul class="list-unstyled">
                <li id="anderemap">
                    <a class="expandable">
                        <span class="foldername three">anderemap</span> 
                        <span class="glyphicon glyphicon-play"></span>
                    </a>
                </li>
            </ul>
        </li>
        <li id="mapjeinner2">
            <a class="expandable">
                <span class="foldername two">mapjeinner2</span> 
                <span class="glyphicon glyphicon-play"></span>
            </a>
            <ul class="list-unstyled">
                <li id="nogmapje">
                    <a class="expandable">
                        <span class="foldername three">nogmapje</span> 
                        <span class="glyphicon glyphicon-play"></span>
                    </a>
                    <ul class="list-unstyled">
                        <li id="supermapp">
                            <a class="expandable">
                                <span class="foldername four">supermapp</span> 
                                <span class="glyphicon glyphicon-play"></span>
                            </a>
                            <ul class="list-unstyled">
                                <li id="eenhelelangemap">
                                    <a class="expandable">
                                        <span class="foldername five">eenhelelangemap</span> 
                                        <span class="glyphicon glyphicon-play"></span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
             </ul>
          </li>
       </ul>
    </li>             
</ul> 






//JQUERY
$('.expandable').click(function() {
    //This is just some small thing i tried.
    //I tried alot of things but can't figure it out.
    //If i click 'supermapp'
    //path should return: 'mapdb2/mapjeinner2/nogmapje/supermapp'

    var path = $( this ).parent().html();
    console.log('path');     
});

http://jsfiddle.net/M73XQ/

Answer 1

I admit, this answer is based on @boris's idea... should I just try to modify his answer? I'm not that experienced with this subject on SO.

However, this is my answer:

$('li').click(function(e) {

    var path = [];
    var el = $(this);

    do {
        path.unshift(el.attr("id"));
        el = el.parent().closest('li');
    } while(el.length != 0);

    alert(path.join('/'));
    e.stopPropagation();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<ul>
    <li id="item1">item1</li>
    <li id="item2">item2
        <ul>
            <li id="superitem1">superitem1
                <ul>
                    <li id="eliteitem1">eliteitem1</li>
                    <li id="eliteitem2">eliteitem2</li>
                </ul>
            </li>
            <li id="superitem3">superitem3</li>
            <li id="superitem4">superitem4</li>
        </ul>
    </li>
    <li id="item3">item3</li>
    <li id="item4">item4</li>
</ul>

EDIT: Same JS as above - your HTML:

$('.expandable').click(function(e) {

    var path = [];
    var el = $(this).closest('li');

    do {
        path.unshift(el.attr("id"));
        el = el.parent().closest('li');
    } while(el.length != 0);

    alert(path.join('/'));
    e.stopPropagation();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="list-unstyled">
    <li id="mapdb1">
        <a class="expandable">
            <span class="foldername one">mapdb1</span> 
            <span class="glyphicon glyphicon-play"></span>
        </a>
        <ul class="list-unstyled">
            <li id="somemap">
                <a class="expandable">
                    <span class="foldername two">somemap</span>
                    <span class="glyphicon glyphicon-play"></span>
                </a>
            </li>
        </ul>
    </li>
    <li id="mapdb2">
        <a class="expandable">
            <span class="foldername one">mapdb2</span> 
            <span class="glyphicon glyphicon-play"></span>
        </a>
        <ul class="list-unstyled">
        <li id="mapjeinner">
            <a class="expandable"><span class="foldername two">mapjeinner</span> <span class="glyphicon glyphicon-play"></span></a>
            <ul class="list-unstyled">
                <li id="anderemap">
                    <a class="expandable">
                        <span class="foldername three">anderemap</span> 
                        <span class="glyphicon glyphicon-play"></span>
                    </a>
                </li>
            </ul>
        </li>
        <li id="mapjeinner2">
            <a class="expandable">
                <span class="foldername two">mapjeinner2</span> 
                <span class="glyphicon glyphicon-play"></span>
            </a>
            <ul class="list-unstyled">
                <li id="nogmapje">
                    <a class="expandable">
                        <span class="foldername three">nogmapje</span> 
                        <span class="glyphicon glyphicon-play"></span>
                    </a>
                    <ul class="list-unstyled">
                        <li id="supermapp">
                            <a class="expandable">
                                <span class="foldername four">supermapp</span> 
                                <span class="glyphicon glyphicon-play"></span>
                            </a>
                            <ul class="list-unstyled">
                                <li id="eenhelelangemap">
                                    <a class="expandable">
                                        <span class="foldername five">eenhelelangemap</span> 
                                        <span class="glyphicon glyphicon-play"></span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
             </ul>
          </li>
       </ul>
    </li>             
</ul>

PS: Requires jQuery ≥ 1.3.0

Answer 2

You can use the .parent() function in succession.

E.g. if you want it to log the path on click:

$("#eliteitem2").click(function() {

  var path = $(this).attr("id");

  while($(this).parent() > -1) {
    path.prepend($(this).parent().attr("id")+"/");
  }

  console.log(path);
});

Should do the trick.

Answer 3

You need to go up more than one parent.

ul -> li -> ul -> li

The text is in the lis. You clicked an li, the parent is the ul and its parent is the li with the text you want.

So if clickedElement is the li you clicked, you'll need to do

$(clickedElement).parent().parent().text();

To get the text of the parent and so on until you've reached the last parent.

If this doesn't help, a JSFiddle (or something similar) with more code to explain your scenario might help.

Edit: With the new code added to the question, to get the text, try:

$(clickedElement).parent().parent().children(".expandable").children(".foldername")