2016-03-23 11 views
0

セクション要素に由来するすべての段落要素を選択するスクリプトを作成しています。見出しタグのpreviousElementSiblingを持つすべての段落要素を除外したいと思います。私のテストconsole.logsとpreviousElementSiblingに基づいて要素を除外する

スクリプトの作業部、私も何をしたいのか

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 
    } 
} 

は特に、見出し要素が先行するいずれかの段落要素を除外されています。

上記のスクリプトを実行すると、console.logの出力にすべてのものが正しく表示されます。 ""/"h3"/etcの値を実際どのようにテストするのか分かりません。

私は、.localNameと.nodeNameのような他のプロパティを使ってみました。私はにconsole.logにそれらを追加する場合:

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

これらの結果の両方を誤ってprevElementがnullのコンソールで。

私も追加してみました:へ

&& prevElement != '<h3'> 

を条件はそれが働いていたかどうかを見るだけでなく、「H3」/「H3」にあれば、それらのどれもなかったです。

最初のdocument.querySelectorAllからh3 + pを除外するか、またはif/then条件でフィルタリングする方法はありますか?

注:これはjQueryでは行いません。

答えて

2

document.querySelectorAllからh3 + pを除外する方法はありますか?

あなたは、セレクタ

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

... OR条件のif/thenでそれをフィルタリングするために使用することができますか? prevElement.nodeName != "h3"

あなたのアプローチ罰金だったが、あなたはそれらのセクションの最初の要素であり、.previousElementSiblingを持っていない段落の世話をする必要があります。 prevElement == null || …をテストするだけです。

+0

どのようにあなたはその長いセレクターに到着しましたか?なぜ、「セクション> p:not(h3 + p)」の仕事はありますか? – Cedon

+0

@belinus:[':'単純なセレクタしか許されない](https://drafts.c​​sswg.org/selectors-3/#negation) - 私は ':not(h1、h2、h3、...)を使うのが好きだった) 'しかし、それは動作しません。セレクタ4のドラフトは少し緩いですが、まだ実装されていないと思います。だから私はあなたの説明を取って、文字通りそれをセレクタに翻訳しました... – Bergi

+0

これはCSS対JSの楽しみです:P。 p:first-childは必要ですか、セレクタの2番目の部分ですか? pはセクションの最初の子です。 – Cedon

関連する問題