静的なHTMLファイルを読み込み、クラス別に配列に分割

Question

私は数日間この作業をしています。私が見つけたSOの答えのほとんどは、divや変数にロードされたファイルの内容を取得するのに役立ちますが、その上でquerySelectorAllを実行させません。だから、私がする必要があるのは、ファイルをロードし、それをクラスに基づいた配列に分割することです。さらに騒ぎがなければ、コード：

content.txt：

<h3 class="chapter">Chapter 1</h3> 
<p>Lorem</p> 
<h3 class="chapter">Chapter 2</h3> 
<p>Lorem</p> 

ロードJS：

$.ajax({ 
     url: "content/content.txt", 
     cache: false, 
     crossDomain: true, 
     success: function(html){   
     var div = document.createElement("div"); 
     div.innerHTML = html; 
     var chapters = div.querySelectorAll('chapter'); 
     alert(chapters.length); 

     } 
    }); 

期待される結果：

['<h3 class="chapter">Chapter 1</h3><p>Lorem</p>', 
    '<h3 class="chapter">Chapter 2</h3><p>Lorem</p>'] 

だから、これはファイル（確認）をロード私は変数にHTMLを持っています。私はquerySelectorAllを行うためにDOMの動的DIVにロードしようとしますが、それはすべて{}です。もし私がダンプをinnerHTML私のすべてのコンテンツはそこにあります。

私はバニラJSとjQueryを混在させていることは知っていますが、これについては適切なjQueryの方法が不明です。何かご意見は？

Answer 1

セレクタchapterはすべての<chapter>要素に一致します。そのような要素はHTMLにはなく、テキストファイルにそのような要素はありません。それが何も合致しない理由です。

align="chapter"は無効です。HTML。 chapterは、align属性の有効な値ではありませんが、これは現在廃止されています。

賢明なHTMLを書くことから始めます。クラスを使用してdiv要素のタイプを区別します。

<div class="chapter"> 

そのため、代わりに<section>要素を使用することを検討してください。

div.querySelectorAll('.chapter');