隔离与jQuery

Question

确定，具体的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班只是这个特定元素（和所有其他的删除元件）。

这是我如何处理这个特定部分：从HTML

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

所以，你可能已经猜到它就像“选择”项的方式（通过点击）文件。

现在，这里的渔获：

我怎么可能让这个“选择”是进步？

我的意思是......

当在导航栏用户第一次点击：

• 检查第一div与comp-id选择（具有类msp-selected）。如果没有，请选择它。
• 如果已经选择了第一个div，那么请进一步深入查找comp-id，然后选择一个。

---

因此，任何想法？

你会怎么做？

---

P.S.当点击导航项目的<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 

所以，基本上它只是“选择”最外层的容器。这是错误的...下一次用户点击，内容应该选择 - 然后导航栏，然后navbar项....

Answer 1

你可能会写一个这样的函数（我不知道如果语法是正确）

function onclick(sender) 
    { 
     if(type of sender == null) 
     { 
      return; 
     } 
     if(sender.className=="selected") 
     { 
      onclick(sender.childElement[0]); 

      // OR If you need all children to be selected, 

      // for(var i =0; i<sender.childElement.count; i++) 
      // onclick(sender.childElement[i]); 


     } 
     else 
     { 
      sender.className="selected"; 
     } 
    }