檢索與特定類別的所有兒童元素標籤從一個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元素

回答

相關問題