3

我有以下 DOM 树：

<div class="myclass">
     <td>
           // lots of td and tr elementds...
      </td>
      <div>
           // lots of td and tr and div elementds...
           .....
           .....
           <span class="myspan">
              // lots of td and tr and div elementds...
              .....
              .....
           </span>           
      </div>
</div>

我有几个主要的 div 元素 - class="myclass" 的 div

我有以下代码：

  $("div").each(function(i,e) {
    if ($(e).hasClass("myclass")) {

        // up to here i have all the div with myclass
             .....
             .....
           //code should be added here
    }
  })

如何使用 JQuery 检索主 div 元素内的 myspan 类的所有 span 元素？

我想更清楚一点：我需要的是一个具有 class = myspan 并且位于当前 div 元素下的元素列表，代码应该添加到我写的地方，因为每个 div 元素都会有一组不同的元素.

我希望我现在清楚自己。请帮忙，谢谢

4

4 回答 4

8

这应该为您做到这一点。

$("div.myclass span.myspan").each(function() {
    console.log(this);
});

编辑

执行此操作的另一种方法是保留父上下文，如下面的代码所示。此更新基于对此答案的评论。我已经留下了原始答案（上图），因为原始问题的措辞方式可能对偶然发现此答案的其他人有用。

$("div.myclass").each(function(i) {
    console.log("spans within div index " + i);
    $(this).find(".myspan").each(function() {
        console.log(this);
    });
});

http://jsfiddle.net/ryanbrill/Q4b4N

于 2013-04-11T18:24:45.147 回答
3

您将代码缩短如下

 var myspan = $("div.myclass span.myspan ");
于 2013-04-11T18:26:01.983 回答
2

如果我说对了，那么您需要jquery find函数，例如以下代码：

var spans = $("div.myclass").find('span.myspan');//cache the span
spans.each(function(i,e) {//do what you need
    $(this).addClass('test');//just a sample action
});

同样可以用 1 行来实现，像这样

$("div.myclass").find('span.myspan').addClass('test');

但这取决于您想要实现的目标。这是一个小提琴

于 2013-04-11T18:24:06.140 回答
1

尝试这个：

$(document).ready(function() {
    $("div.myclass").find(".myspan");
});

如果您只有一个div元素，或者如果您想要同一集合中的所有span.myspan元素（甚至跨多个div.myclass元素），则不需要.each.


更新

虽然$("div.myclass .myspan")是有效的，但$("div.myclass").find(".myspan") 实际上速度明显更快！

查看这个性能比较，它证明.find比简单地将类添加到选择器快 93%！

于 2013-04-11T18:24:11.953 回答