DOM koleksiyonundaki `querySelectorAll 'özelliğini kullanan çocuk seçici

Question

İç içe geçmiş çocuk listeleri içeren bir listeniz olduğunu varsayalım.

<ul> 
    <li></li> 
    <li> 
     <ul> 
      <li></li> 
      <li></li> 
     </ul> 
    </li> 
    <li></li> 
</ul> 

Ve bir seçim yapmak için document.querySelectorAll() kullanın:

var ul = document.querySelectorAll("ul"); 

i doğrudan alt öğeleri almak için ul koleksiyonu nasıl kullanabilirim

?

ul.querySelectorAll("> li"); 
// Gives 'Error: An invalid or illegal string was specified' 

en ul şekilde önbelleğe alınır (Aksi ı doğrudan ul > li yapmış olabilir) tahmin edelim.

$("ul").find("> li"); 

Ama yerli querySelectorAll değil yapar:

jQuery bu çalışır. Herhangi bir çözüm?

Answer 1

ul döndürülmüş bir NodeList olduğundan, dolaylı olarak jQuery koleksiyonu gibi içeriğini üzerinde döngü yapmaz. ul[0].querySelectorAll()'u kullanmanız veya daha iyisi'u querySelector() ile seçmeniz gerekir. Ayrıca, querySelectorAll(), , > almaz ve geçerli bağlamından çalışır. Ancak, (gerçi tarayıcı uyumluluğu kontrol) o lazd's answer kullanarak işe alabilirsiniz ya da (hayır tarayıcılarda sorun olmalı) bu geçici çözümlerden herhangi ...

[].filter.call(ul.querySelectorAll("li"), function(element){ 
    return element.parentNode == ul; 
}); 

jsFiddle.

Bu, ul soyundan gelen tüm li öğelerini seçer ve daha sonra doğrudan torun olmayanları kaldırır.

Alternatif olarak, ... filtrelemedikçe sonra

[].filter.call(ul.childNodes, function(node) { 
    return node.nodeType == 1 && node.tagName.toLowerCase() == 'li'; 
}); 

jsFiddle tüm childNodes almak ve olabilir.

Answer 2

document.querySelectorAll() tarafından döndürülen NodeList üzerinden yinelemeniz gerekir ve bu listedeki her öğe için element.querySelectorAll()'u arayın.

Answer 3

Geçerli öğeye "köklenen" bir seçici yazmak için doğru yol :scope kullanmaktır.

ul.querySelectorAll(":scope > li"); 

bir açıklama ve sağlam, çapraz tarayıcı çözüm için buraya cevabımı bakınız: https://stackoverflow.com/a/21126966/1170723