JQuery each循环问题

Question

我有以下代码：

  <div>
 <a href="#" class="clickMe">test</a>
 <ul>
     <li class="action_li">1</li>
     <li class="action_li">2</li>
 </ul></div> <div>
 <a href="#" class="clickMe">test</a>
 <ul>
     <li class="action_li">3</li>
     <li class="action_li">4</li>
 </ul>

我想在所有与点击的<a>相同的<div>包含的<li>中循环。

$("a.clickMe").live("click", function(eve){
   eve.preventDefault();
   $('.action_li').each(function(index) {
      console.debug(this);
   }); 
});

但是这样会获取到所有4个<li>，而不只是其中两个，所以我想要的是从$(this)开始，以.each()结束的内容。

- bhefny

---

我想要一个以 $(this) 开头并以 .each() 结尾的东西。这个限制有特别的原因吗？（看起来有点武断） - Roman

Answer 1

有很多方法，例如：

   $(this).parent().find("li.action_li").each(function(index) {
      console.debug(this);
   }); 

或者：

   $(this).next("ul").children("li.action_li").each(function(index) {
      console.debug(this);
   });

etc.

- karim79

---

+1，查看http://jsfiddle.net/buMsx/以获取顶部的工作示例。我反应不够快 :) - David Waters

肯定不会起作用，因为each()不能在find()之后工作。find()本身只会返回一个元素。 - bhefny

@bhefny - 抱歉，但那不正确。find会返回与传递的选择器匹配的所有元素。 - karim79

Answer 2

这应该可以工作：

$("a.clickMe").live("click", function(eve){
   eve.preventDefault();
   $('.action_li', $(this).parent()).each(function(index) {
      console.debug(this);
   }); 
});

选择器旁边的第二个参数将限制搜索范围仅在DOM树的一部分中，该部分为a元素的父级div。

- RaYell

Answer 3

你需要获取与<a>元素同级的<ul>元素，然后获取它的子元素。

例如：

$(this).siblings('ul').children('li.action_li').each(function(index) {
    //...
});

你也可以调用 $(this).next() 或 $(this).nextAll('ul')。

- SLaks

---

我认为你可以直接使用'.action_li'而不是'li.action_li'或者只是普通的'li'... 这对于jquery的选择器引擎来说更快。 - ricecake5

@ricecake5：是的，你可以。然而，可能会有其他<li>。 - SLaks

Answer 4

这可能有效：

$(this).parents('div').find('li').each(...

- Jeremy