2017-03-11 7 views
-2

AJAX経由で別のページコンテンツを読み込もうとしています。コンテンツを読み込みますが、新しいコンテンツの解析に問題があります。ここでJQuery get/loadは新しいDOMを解析できません

は私のコード

$.get(urlPath, function (content) { 
       var newDom = $(content); 
       var newTitle = newDom.find("title").text(); 
       console.log(newDom); 
       console.log(newDom.find(CLASS.MAIN_CONTENT)); 
       console.log(newTitle); 
       $(CLASS.MAIN_CONTENT).replaceWith(newDom.find(CLASS.MAIN_CONTENT)); 
      }); 

であり、これは動作しません、私は要求から有効なコンテンツを取得するが、それでもここでは、新しいDOM から任意の要素を取得することはできません$(content)

で解析の出力でありますenter image description here

そして、ここでは、コンテンツの生の出力であるconsole.log(content)

enter image description here

何が間違っている可能性がありますか、なぜこれが機能しないのですか?

答えて

1

まず、$()本文の内容、ない完全な文書を解析されることを想定しているため、そのHTMLを解析する$()を使用すると、離れて、それのいくつかをスローすることに注意してください。したがって、構造内にネストされているように見える要素は、jQueryオブジェクトのトップレベルになる可能性があります。例えば:

var content = $(
 
    "<!doctype html>" + 
 
    "<html>" + 
 
    "<head><title>Example</title></head>" + 
 
    "<body>" + 
 
    "<p>Hi there</p>" + 
 
    "</body>" + 
 
    "</html>" 
 
); 
 
console.log(content.length); // 2 
 
content.each(function() { 
 
    console.log(this.tagName); // TITLE, P 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

findはjQueryオブジェクトで内のトップレベルの要素を見えますが、トップレベルの要素自体、ちょうど彼らの子孫を見ていません。 CLASS.MAIN_CONTENTセレクタに一致する要素がトップレベルにある場合は、findによって検出されません。代わりにfilterが必要です。それはどちらかの場所にあってもよい場合は、findfilterの組み合わせたい:

var mainContent = newDom.find(CLASS.MAIN_CONTENT).add(newDom.filter(CLASS.MAIN_CONTENT)); 
+0

おかげで、どのように私は、この場合には新しいタイトルを解析することができますか?そして、私はCLASS.MAIN_CONTENTセレクタを持つ新しいブロックを既存のDOMに置き換えるだけで済みます。 – HelloMufecayo

+0

@HelloMufecayo:私はその質問を理解していません。 'filter'から取得したjQueryオブジェクト(または' find'またはその2つの組み合わせ)を使用します...? –

+0

私はそれがうまく動作するこのソリューションを使用しましたhttp://stackoverflow.com/questions/30676999/parse-entire-html-document-from-string-into-jquery – HelloMufecayo

0

ソリューションの答えのための

var newDom = $('<div></div>').append($.parseHTML(content)); 
       document.title = newDom.find("title").text(); 
       $(CLASS.MAIN_CONTENT).replaceWith(newDom.find(CLASS.MAIN_CONTENT)); 
関連する問題