2

次のような「layouts.xml」という XML ファイルがあります。

<?xml version="1.0" encoding="utf-8" ?>
<layouts>
   <layout id="layoutA">
     <div class="layout typeA">
       <div class="class1"></div>
       <div class="class2"></div>
     </div>
   </layout>
   <layout id="layoutB">
     <div class="layout typeB">
       <div class="class1"></div>
       <div class="class3"></div>
     </div>
   </layout>
</layouts>

XML の各「レイアウト」要素には、Web ページに HTML として動的に挿入したい一連の div 要素が含まれています。私はこれを次のようにしようとしています:

$.fn.myFunc = function () {
   var url = "layouts.xml";
   var $element = $(this);  // element to append to

   $.get(url, function (responseXml) {
      var $layout = $(responseXml).find('#layoutA').children();
          $element.empty();
          $element.append($layout);
   });
}

$('div#myDiv').myFunc();

これにより、マークアップが Web ページに挿入されますが、これらの動的に挿入された div 要素用に作成した CSS スタイルが適用されません。スタイルは、既存の HTML 要素には適用されますが、動的に追加されたコンテンツには適用されません。オンライン w3c サービスを使用して、CSS、XML、および結果の HTML を検証しました。

これらの CSS スタイルを適用するための助けをいただければ幸いです。ありがとうございました。

4

2 に答える 2

1

$.ajax() メソッドに切り替えて dataType に「text」を指定すると、次のように XML を追加できました。 

var $element = $('div#myDiv');

$.ajax({
    url: 'layouts.xml',
    dataType: 'text',
    success: function (data) {
        var $layout = $(data).find('.layout typeA');
        $element.empty();
        $element.append($layout.html());
    }
});

Tap が指摘したように、XML をテキストとして追加する必要がありました。ただし、$.text() または $.html() メソッドを介して XML ドキュメント オブジェクトから XML をテキストとして取得できなかったため、AJAX 要求を変更して、XML をテキストとして取得する必要がありました (代わりにXML ドキュメント オブジェクトとして)。

于 2013-05-24T15:12:21.830 に答える
0

xml 要素を html DOM に追加する代わりに、そのテキスト値を追加します。

$element.append($layout.html());

または複数の子供の場合、

$layout.each(function(){
    $element.append($(this).html());
});
于 2013-05-23T23:07:10.207 に答える