检索与特定类别的所有儿童元素标签从一个div元素

我有以下DOM树：检索与特定类别的所有儿童元素标签从一个div元素

<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有follwing代码：

$("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元素里面？

我想更清楚：我需要的是具有类= myspan和位于当前div元素下元素的列表，应在地方添加的代码，我写因为每个div元素则有一组不同的元素。

我希望我现在能让自己清醒。请大家帮忙，感谢

来源

2013-04-11 john Smith

这应该为你做。

$("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-11 18:24:45 ryanbrill

+1最简洁的答案。 – didierc 2013-04-11 18:29:36

谢谢！以及如果还有其他一些元素，比如span类和myspan，我该如何检索它们呢？不仅是跨度元素？ – 2013-04-11 18:35:30

只留下标签名称，它将查找所有具有类的元素：'$（“div.myclass .myspan”）' – ryanbrill 2013-04-11 18:36:17

如果我得到你的权利，那么你需要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-11 18:24:06 trajce

为什么用'find'时，你可以将其添加为选择器的一部分吗？有一些表演的东西吗？ – ErikE 2013-04-11 18:29:28

你说得对，但我不确定哪些更快？ – trajce 2013-04-11 18:31:24

试试这个：

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

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

UPDATE

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

看到这个performance comparison，这表明.find比简单地将类添加到选择器快93％！

来源

2013-04-11 18:24:11

为什么只要将它添加为选择器的一部分就可以使用'find'？有一些表演的东西吗？ – ErikE 2013-04-11 18:29:05

@ErikE - 实际上，添加它作为选择器的一部分对性能更好。然而，基于他的实现，我认为这可能更适应，因为我的示例代码下面提到的原因。总而言之，将它们放在@ryanbrill和@Sushil中的选择器中会使所有元素都放在一个集合中。我的代码也是如此，但是我保留原样，以防万一他希望使用'.each'来调整解决方案，以便在不同时间分别对集合进行操作。实质上，我想把他介绍给'.find'。 – 2013-04-11 18:32:45

我可以看到，虽然在我的寒opinion意见中，您应该向他展示“最佳”方式，然后*针对不同用例教育其他可能性。 – ErikE 2013-04-11 19:35:24

你精读缩短你的代码如下

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

来源

2013-04-11 18:26:01 Anoop

好...但有人打你。好吧。 :) – ErikE 2013-04-11 18:30:34

+1仍然有用，并将集合应用于变量。 :) – 2013-04-11 18:34:08

检索与特定类别的所有儿童元素标签从一个div元素

回答

相关问题