Isolate specific HTML elements with jQuery

Isolate specific HTML elements with jQuery

OK, what I need may sounds rather complex, but here it is...
Let's say we have the HTML code below (it's still just an example, but
it's still quite accurate) :
<div data-role="content" comp-id="jqm-content-6207" id="jqm-content-6207"
class="" data-theme="" >
<!-- New Navigation Bar #1 -->
<div data-role="navbar" data-position="fixed"
comp-id="jqm-navbar-4603" id="jqm-navbar-4603" class=""
data-iconpos="top" >
<ul>
<!-- New Navigation Bar Item #1 -->
<li>
<a href="#" comp-id="jqm-navbar-item-6671"
id="jqm-navbar-item-6671" class="" data-icon="home"
data-theme="" >
One
</a>
</li>
<!-- / New Navigation Bar Item #1 -->
<!-- New Navigation Bar Item #2 -->
<li>
<a href="#" comp-id="jqm-navbar-item-4404"
id="jqm-navbar-item-4404" class="" data-icon="gear"
data-theme="" >
Two
</a>
</li>
<!-- / New Navigation Bar Item #2 -->
</ul>
</div>
<!-- / New Navigation Bar #1 -->
<!-- New Navigation Bar #2 -->
<div data-role="navbar" data-position="fixed"
comp-id="jqm-navbar-4658" id="jqm-navbar-4658" class=""
data-iconpos="top" >
<ul>
<!-- New Navigation Bar Item #2.1 -->
<li>
<a href="#" comp-id="jqm-navbar-item-5321"
id="jqm-navbar-item-5321" class="" data-icon="home"
data-theme="" >
One
</a>
</li>
<!-- / New Navigation Bar Item #2.1 -->
<!-- New Navigation Bar Item #2.2 -->
<li>
<a href="#" comp-id="jqm-navbar-item-2843"
id="jqm-navbar-item-2843" class="" data-icon="gear"
data-theme="" >
Two
</a>
</li>
<!-- / New Navigation Bar Item #2.2 -->
</ul>
</div>
</div>
First-off, the core idea is : when the user clicks an item with the
comp-id attribute set, then add class msp-selected just to this specific
element (and remove it from all other elements).
This is how I'm handling this specific part :
function removeAll()
{
$("*").each(function() {
if ($(this)!==undefined) {
$(this).removeClass("msp-selected");
}
});
}
$(document).ready( function() {
$('[comp-id]').bind('click', function(event) {
removeAll();
$(event.target).addClass('msp-selected');
});
});
So, as you may already have guessed it's like a way of "selecting" item
(by clicking on them) from the HTML document.
Now, here's the catch :
How could I make it so that the "selection" is progressive?
What I mean...
When the user first clicks on the Navigation Bar :
Check if the first div with comp-id is selected (has the class
msp-selected). If not, select it.
If the first div is already selected, then go one level deeper looking for
comp-id, and select that one.



So, any ideas?
How would you do it?