2016-03-23 32 views
0

Bir bölüm öğesinden inen tüm paragraf öğelerini seçen bir komut dosyası yazıyorum. Bir başlık etiketinin previousElementSibling'i olan tüm paragraf öğelerini hariç tutmak istiyorum. benim test console.logs ileBir önceki öğe için geçerli olan bir öğe hariç tutuldu

script çalışma parçası Ne olsa yapmak istiyorum, özellikle de bir başlık elemanı öncesinde herhangi paragraf elemanı dışlamak olduğunu

var allParagraphs = document.querySelectorAll('section > p'); 
var firstParagraph = allParagraphs[0]; 

for (i=0; i < allParagraphs.length; i++) { 

    var prevElement = allParagraphs[i].previousElementSibling; 
    console.log(prevElement); 

    if (i !=0 && i != allParagraphs.length && i % 3 == 0) { 
     // Work Magic on the Paragraph Elements 
    } 
} 

olduğunu.

Yukarıdaki komut dosyasını çalıştırdığımda, konsol.log çıktım her şeyi doğru bir şekilde listeler. Bu değeri ""/"h3"/etc için gerçekten nasıl test edeceğimi bilemediğim şey.

.localName ve .nodeName gibi diğer özellikleri kullanmayı denedim. Ben console.log için de eklendiğinde:

console.log(prevElement.localName); 
console.log(prevElement.nodeName); 

bu sonucun ikisi hatayla prevElement null konsolda.

Ben de ekleyerek çalıştı: için

&& prevElement != '<h3'> 

koşullar o çalıştı olmadığını görmek, hem de 'h3'/'H3' eğer ve bunların hiçbiri yaptı.

İlk document.querySelectorAll öğesinden h3 + p ifadesini hariç tutmanın veya if/o durumda filtrelemenin bir yolu var mı?

Not: Bunu jQuery'de yapmak istemiyorum.

cevap

2

İlk document.querySelectorAll'dan h3 + p hariç tutmanın bir yolu var mı?

Sen seçici

section > p:first-child, section > *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) + p 

kullanabilirsiniz ... ya/ardından kondisyon eğer bunu süzmek için?

prevElement.nodeName != "h3" ile olan yaklaşım iyiydi, ama onların bölümünde ilk unsur vardır ve .previousElementSibling yok paragraf bakmak gerekir. Sadece prevElement == null || … için test edin.

+0

Bu uzun seçiciye nasıl geldiniz? Neden 'section> p: not (h3 + p)' çalışmıyor? – Cedon

+0

@belinus: [': sadece basit seçicilere izin vermez] (https://drafts.csswg.org/selectors-3/#negation) -' yi kullanmayı sevdim: (h1, h2, h3,…) ama işe yaramıyor. Seçmenler 4 taslağı bunu biraz gevşetiyor, ancak henüz uygulanmadığını düşünmüyorum. Bu yüzden açıklamanızı aldım ve çeviriyi tam anlamıyla bir çeviriciye çevirdim… – Bergi

+0

Bu, CSS ve JS: P'nin eğlencesi. P: İlk çocuğa ihtiyaç var mı yoksa seçicinin ikinci kısmı mı? p bölümün ilk çocuğu. – Cedon