Question

I have a ul>li structure similar to the following:

<ul id="node">
    <li><a data-name="One">One</a>
        <ul>
            <li><a data-name="Two">Two</a></li>
            <li><a class="me" data-name="Three">Three</a>
                <ul>
                    <li><a data-name="Four">Four</a></li>
                    <li><a class="me" data-name="Five">Five</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

My need is to traverse this and grab the data-name attribute from each <a> element with the class me, which would result in an array:

items = {"Three","Five"}

NEW ISSUE:

What if I wanted to start at Three, only knowing that the data-name attribute to traverse from is Three and only traversing down from there – i.e. the result would only be Five?

Answer 1

var items = $('ul#node a.me').map(function(){
   return $(this).attr('data-name');
});

or

var items = [];
$('ul#node a.me').each(function(){
   items.push($(this).data('name'));
});

DEMO

NEW ISSUE :

var items = [];
$('ul#node a[data-name="Three"]').parent().children().find('a.me').each(function(){
    items.push($(this).data('name'));
});

And the new Demo…