Javascript 如何查看html元素集合并处理它们？

我对HTMl有：

<div id='mainPageNavigation'>
   <div><span id='home'><a href='#/'>1</a></span></div>
   <div><span id='faq'><a href="#/faq">2</a></span></div>
   <div><span id='contact'><a href="#/contact">3</a></span></div>
   <div><span id='registration'><a href='#/registration'>4</a></span></div>
   <div><span id='enter'><a href='#/enter'>5</a></span></div>
   <div><span id='page'><a href='#/page'>6</a></span></div>                                                
</div>

---

我需要在divmainPageNavigation内部Div上观看。如果用户使用AngularJS单击内部div->add class on this div+remove class on other div。

这不是watchesCollection的目的。您可以在jQuery中简单地执行此操作。请尝试以下代码段：

$("#mainPageNavigation > div > a").click(function () {
  $(this).parent().closest("div").addClass('test');
  $(this).parent().closest("div").siblings().removeClass('test');
})

---

请确保正在将jQuery.min加载到DOM中

我已经这样做了。但我正在寻找代码改进。还有另一种方法可以替代指令。我在指令->监视范围变量中使用了类似的jquery代码。但它很沉重。