Jquery parent child dom tranversing using a self referencing function

Question

Basically, I'm attempting to recursively read the dom tree backwards to generate a path. The reading of the dom starts with a clicked item and goes up to the parent, collects a attribute value and carries on upward following strict naming conventions until there aren't any more parents. I am having trouble figuring it out but feel I am on a good path. I would like to learn as much conceptually as I can. Thanks for any feedback. Here's a JsFiddle

I would like the result of a click, however many levels deep, to result in a generated path almost like breadcrumbs. The problem is I can't seem to format the string and output it in the right sequence.

Desired output: /books/1/chapters/1/pages/1

HTML

    <div class="list-group" data-type="books">

        <a href="#" class="book list-group-item" data-id="1">Book 1</a>

        <div class="list-group" data-type="chapters">

            <a href="#" class="chapter list-group-item" data-id="1">Chapter 1</a>

            <div class="list-group" data-type="pages">
                <a href="#" class="page list-group-item" data-id="1">Page 1</a>
                <a href="#" class="page list-group-item" data-id="2">Page 2</a>
                <a href="#" class="page list-group-item" data-id="3">Page 3</a>
            </div>

        </div>

    </div>

JQUERY

$(document).on('click','.list-group-item', function(e){
    e.stopPropagation();
    path = getDomData($(this)); // books/1/chapter/2/page/1
});

function getDomData(activeElement){
    var activeElementId = activeElement.data('id'); 
    var activeElementParent = activeElement.closest('.list-group');
    var activeElementParentType = activeElementParent.data('type');
    var activeElementParentParent = activeElementParent.parent('.list-group-item');
    result = activeElementParentType +'/'+ activeElementId +'/';
    if(activeElementParentParent.length > 0){
        getDomData(activeElementParentParent);
    }
    return result;
}

Answer 1

Iterate over the collection of parents using.parents().each(function(){}) on the jquery object, which will walk up the tree:

//use the dollar-sign at beginning if the argument name
//to hint that the fn is expecting a jquery object: 

function getDomData($activeElement){
    //start with the element that was clicked:
    var path = '/' + $activeElement.data('id');

    //then go over each ancester up the tree, check which
    //type it is, and append to the beginning of your path accordingly:
    $activeElement.parents().each(function(){

        if($(this).hasClass('list-group-item')){
            path = ('/' + $(this).data('id')) + path;
        }
        else if($(this).hasClass('list-group')){
            path = ('/' + $(this).data('type')) + path;
        }
    });

    return path;

};

fiddle: http://jsfiddle.net/mhfaust/4vHLP/1/

Answer 2

Solution:

Fiddle

$(document).on('click','.list-group-item', function(e){
    e.stopPropagation();
    path = getDomData($(this)); // books/1/chapter/2/page/1
    console.log(path);
});

function getDomData(activeElement){
    var activeElementId = activeElement.data('id'); 
    var activeElementParent = activeElement.closest('.list-group');
    var activeElementParentType = activeElementParent.data('type');
    var activeElementParentParent = activeElementParent.siblings('.list-group-item');
    var result = activeElementParentType +'/'+ activeElementId +'/';
    if(activeElementParentParent.length > 0){
        return getDomData(activeElementParentParent) + result;
    }
    return result;
}

Changes:

• Declared result with var (so, its value will not be overwritten in the recursion)
• Returned the result of recursion inside if (concatenated with the current result)
• Changed from activeElementParent.parent to activeElementParent.siblings
• Changed return of ajaxPath to result (ajaxPath is unknown)
• Added console.log(path); (see the results in the console)