3
私はHTMLファイルをGETし、それを変数にjQueryオブジェクトとして割り当てようとしています。無駄に。スタックスニペットでGETリクエストが許可されているかどうかは分かりません。ここでもJSFiddle linkがあります。jQueryが解析しないHTMLで何が問題になっていますか？
var html = '<!DOCTYPE html><html lang="en"><head><title>Template</title></head><body itemscope itemtype="http://schema.org/WebPage"><main><header itemscope itemtype="http://schema.org/Country" itemprop="about"><h1 itemprop="name">Dummy heading</h1><p><span class="capital" title="Capital" itemprop="containsPlace"></span><span title="Dummy title" itemprop="additionalProperty" itemscope itemtype="http://schema.org/PropertyValue"><meta itemprop="name" content="Member of the EU since"><span itemprop="value" class="member-since">Dummy year</span></span></p></header><div itemprop="mainEntity" itemscope itemtype="http://schema.org/ItemList"><meta itemprop="description" content=""><article class="recipe loading" itemprop="itemListElement" itemscope itemtype="http://schema.org/Recipe"><meta itemprop="position" content=""><aside class="media"><div class="img-gallery" itemscope itemtype="http://schema.org/ImageGallery"></div><div itemscope itemtype="http://schema.org/VideoObject" class="youtube"><a itemprop="contentUrl" href="#" title=""><meta itemprop="name" content=""><meta itemprop="uploadDate" content=""><meta itemprop="description" content=""><img itemprop="thumbnailUrl" src="#" alt=""></a><div class="youtube-player"></div></div></aside><div class="text"><div class="wiki-text"><h1 itemprop="name">Dummy heading</h1><p itemprop="description"></p><p class="read-more">For more information about <span class="recipe-name"></span>, read the <a href="#" title="" itemprop="sameAs">Wiki</a>.</p></div><div class="rating" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">Rated <span itemprop="ratingValue">3.5</span>/5 based on <span itemprop="reviewCount">11</span> customer reviews</div><div class="cooking"><h2>Bake it yourself!</h2><div><meta itemprop="cookTime" content=""><span>Bake time: <span class="bake-time"></span></span></div><div class="ingredients-wrapper"><h3>Ingredients <small>for <span itemprop="recipeYield"></span></small></h3><div class="ingredients"><h4>Dummy heading</h4><ul></ul></div></div><div class="how-to"><h3>Steps</h3><ol></ol></div></div></div></article></div></main></body></html>';
$.ajax({
type: 'post',
url: "/echo/html/",
dataType: "html",
data: {
html: html,
delay: 1
}
}).done(function(data) {
// string
\t console.log(data);
// array
console.log($(data));
// array
console.log($.parseHTML(data));
// array
console.log($($.parseHTML(data)));
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>HTMLが有効です。しかし、私はオブジェクトでそれを得ることはできません。返されるデータは、期待どおりの文字列です。しかし、私が$.parseHTML()を使ってその文字列をHTMLとして解析しようとすると、またはに入れたり、両方とも試してみても、常に同じ結果が得られます。タイトルとメイン要素を含む配列です。
どのようにしてjQueryがそれを解析し、頭部の要素と体の1つの要素の配列を作成するのか、何らかの方法があります。しかしなぜ？そして、これをどのように修正してjQueryオブジェクトに変換できますか？私は体の中身だけに興味があります。
a similar questionがありますが、受け入れられた解決策はJSFiddleに入るときに役立ちませんし、この問題はXAMPPでもローカルで発生しています。
ええと、最初にDOMに要素を追加しないとこれを行う方法はありますか？問題は、メモリに内容をロードし、その上でいくつかの変更（クローニング、切り離し、すべての処理）を行い、それをDOMに追加することです。メモリ内では、これはDOMの変更を行うよりも速くなければならないためです。 –
私が知っているわけではありません。これは適切に解析されるこの方法です。さもなければ、あなたの文字列にいくつかの 'jQuery'トリックを実行できますが、それは' DOM'要素ではないので、すべてが利用可能とは限りません。たとえば、 '$（data）'で '.find（）'を実行してクラスで選択すると、タグでは選択できませんが、それはDOMではないからです。それは文字列です。上記の方法では、ajaxがロードされるのを待つだけでなく、結果として生じるDOMが適切にロードされるようにします（DOM操作スクリプトがある場合に備えて）。 –
私は参照してください。スマート。ですから、html/bodyに追加し、 '.detach（）'をVARに入れて、解析された内容を効果的にメモリに戻し、ダミーを削除するのが最善の考えです。 VARを操作し、VARをDOMに追加し直しますか？ –