使用 jQuery 隔离特定的 HTML 元素

好吧，我需要的东西可能听起来很复杂，但这里是...

假设我们有下面的HTML代码(它仍然只是一个示例，但它仍然非常准确(：

<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>

首先，核心思想是：当用户单击设置了comp-id属性的项目时，然后将类msp-selected添加到此特定元素(并将其从所有其他元素中删除(。

这就是我处理此特定部分的方式：

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');
    });
});

因此，您可能已经猜到了，这就像一种从HTML文档中"选择"项目(通过单击它们(的方式。

现在，这里有一个问题：

我怎样才能使"选择"是渐进的？

我的意思是...

当用户第一次单击导航栏时：

• 检查是否选择了第一个带有 comp-id 的div(具有类msp-selected(。如果没有，请选择它。
• 如果已选择第一个div，则更深入地查找comp-id，然后选择该级别。

那么，有什么想法吗？

你会怎么做？

附言当单击导航项的<a>时，哪个特定项接收事件？是<div data-role='"navbar'">还是导航栏项？无论如何，从所有这些项目中，我想选择最外层的 - 当前未被选中。下次，当用户再次单击并例如选择导航栏时，请取消选择它并选择它的子项(更深入(。

编辑：

尝试时：

$(document).ready( function() {
    $('[comp-id]:not(.msp-selected)').on('click', function(e) {
        removeAll();
        $(this).addClass('msp-selected');
    });
});

单击导航栏项目时我得到的是：

Selected Div : jqm-navbar-item-8421
Selected Div : jqm-navbar-8598
Selected Div : jqm-content-2860
Selected Div : jqm-page-3363

所以，基本上它只是"选择"最外面的容器。这是错误的...下次用户单击时，应选择内容 - 然后是导航栏，然后是导航栏项。