Question

我有以下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元素 - div与class =“myclass”

我有以下代码：

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

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

如何使用类myspan检索所有span元素 - 使用JQuery在主div元素中？

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

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

Answer 1

这应该适合你。

$("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

Answer 2

您可以按照以下方式缩短代码

 var myspan = $("div.myclass span.myspan ");

Answer 3

如果我说得对，那么你需要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');

但这取决于你想要达到的目标。这是一个小提琴

Answer 4

试试这个：

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

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

的更新

虽然$("div.myclass .myspan")有效，$("div.myclass").find(".myspan") 实际上要快得多！

请参阅此performance comparison，其中演示.find比仅将类添加到选择器快93％！

从div元素中检索具有特定类的所有子元素标记

4 个答案: