1

XML に基づいて画面に画像を読み込もうとしています。これが私が使用しているxmlです

<item>
    <heading>Heading 1</heading>
    <content>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla tempus   varius. Nulla facilisi. In nisi leo, commodo id vestibulum non, mollis quis justo. Nunc elementum feugiat gravida. Praesent condimentum nisi id sapien placerat sed posuere velit fringilla. Curabitur ac purus odio. </content>
    <image>image.jpg</image>
</item>
<item>
   <heading>Heading 2</heading>
   <content>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla tempus varius. Nulla facilisi. In nisi leo, commodo id vestibulum non, mollis quis justo. Nunc elementum feugiat gravida. Praesent condimentum nisi id sapien placerat sed posuere velit fringilla. Curabitur ac purus odio. </content>
   <image>image.jpg</image>
</item>

そして、このようにjQueryで要素を取得しています。

$.get('feed1.xml', function(xml) {
     $(xml).find('item').each(function() {
     content+= "\<li class=\"paginate\"\>";
     content+= '\<img src=\"' + $(this).find('image').text() + '\"\/\>';
     content+= "\<h3\>" + $(this).find('heading').text() + "\<\/h3\>" ;
     content+= "\<p\>" + $(this).find('content').text() + "\<\/p\>";
     content+="\<\/li\>";
 });

これは Firefox でうまく機能します。ただし、Chrome と IE では、「見出し」と「コンテンツ」は期待どおりに読み込まれますが、画像部分は空の文字列を返します。少しデバッグしたところ、要素名「image」を別のものに変更するだけで、Chrome でも同じコードが機能することがわかりました。次に、console.log を少し実行して、バックグラウンドで何が起こっているかを理解しました。

 $(xml).find('item').children().each(function(){
   console.log((this).nodeName);
 });

これが返ってきた、

HEADING
CONTENT
IMG

クロムではFFが要素名を保持していました。

ソースコードもこの content+= '\'; に変更してみました。

しかし、これもうまくいきませんでした。

Chrome が要素名「image」を「img」に変更する理由はありますか? また、オブジェクト 'img' が DOM に存在する場合、そのオブジェクトを特定できないのはなぜですか?

4

2 に答える 2

0

同じ例を試してみたところ、xml に問題が見つかりました。

XML ファイルは

<?xml version="1.0" encoding="utf-8"?>
<hello>
<item>
    <heading>Heading 1</heading>
    <content>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla tempus   varius. Nulla facilisi. In nisi leo, commodo id vestibulum non, mollis quis justo. Nunc elementum feugiat gravida. Praesent condimentum nisi id sapien placerat sed posuere velit fringilla. Curabitur ac purus odio. </content>
    <image>image.jpg</image>
</item>
<item>
   <heading>Heading 2</heading>
   <content>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla tempus varius. Nulla facilisi. In nisi leo, commodo id vestibulum non, mollis quis justo. Nunc elementum feugiat gravida. Praesent condimentum nisi id sapien placerat sed posuere velit fringilla. Curabitur ac purus odio. </content>
   <image>image.jpg</image>
</item>
</hello>

したがって、jquery コードは正常に動作します...

それでも問題が解決しない場合は、これを使用できます

$.get('feed1.xml', function(xml) {
         $(xml).find('item').each(function() {
         content+= "<li class='paginate'>";
         content+= "<img src='" + $(this).find("image").text() + "'/>";
         content+= "<h3>" + $(this).find("heading").text() + "</h3>" ;
         content+= "<p>" + $(this).find("content").text() + "</p>";
         content+="</li>";
     });
于 2013-04-12T19:08:19.687 に答える