JQueryで読み込んだページのinnerHTMLを変更するには

jQueryでクラス "ToChange"のブロック内のテキストを変更します。それは現在のhtmlファイル内でうまく動作しますが、外部のhtmlファイルでは（ "load"メソッドで挿入しても）それはありません。ここに私のコードは次のとおりです。JQueryで読み込んだページのinnerHTMLを変更するには

のindex.html：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title>Home page</title> 
<script src="jquery-3.1.1.js"></script> 
<script> 
    $(function(){ 
     $('.insert_external').load("external.html"); 
    }); 
</script> 
<script> 
    $(function(){ 
     length = document.getElementsByClassName("ToChange").length; 
     for (i = 0; i < length; i++) { 
      document.getElementsByClassName("ToChange")[i].innerHTML = "New Text"; 
     } 
    }); 
</script> 
</head> 

<body> 
<div class="insert_external"></div> 

<div class="ToChange"> 
    This changes fine 
</div> 
<div class="ToChange"> 
    This changes fine too 
</div> 
</body> 
</html>

external.html：

：
<div class="ToChange"> 
    This text does not change :(
</div> 
私は3つの文字列を参照してください結果

このテキストは:(

新しいテキスト

新しいテキスト

を変更しないと私はそれらのすべてが「新しいテキスト」になりたいです。 jQueryでhtmlとjsのみを使用することは可能ですか？

出典

2016-10-20 John

JavaScriptは非同期で動作します。置換機能はロード機能の前に終了するので、古いテキストが表示されます。関数を実行するには、 '.load（）'関数の 'complete'コールバックを使用します（もう一度）。 – Ivar

load()コールバック内のhtmlを変更する必要があります。新しいデータがここにあります。そうしないと、JSが非同期で動作するため古いDOMで変更されます。

あなたが要求を完了するためにを待つました：

$('.insert_external').load("external.html", function() { 
    length = document.getElementsByClassName("ToChange").length; 
    for (i = 0; i < length; i++) { 
     document.getElementsByClassName("ToChange")[i].innerHTML = "New Text"; 
    } 
});

注：あなたはjQueryのを使用しているので、代わりに.each()機能を使用する方がよいでしょう：

$('.insert_external').load("external.html", function() { 
    $(".ToChange").each(function(){ 
     $(this).text("New Text"); 
    }) 
})

これが役に立ちます。

出典

2016-10-20 09:53:22

ありがとうございます。ところで、 '.each'関数についての注意もまた本当に役に立ちました。 – John

ロード機能が非同期に動作するため、テキストを更新する関数は新しいコンテンツが実際にロードされる前に実行されています。新しいデータがロードされるまで待つべきです。そのためには、.load（）関数のコールバックを使用します。

出典

2016-10-20 09:50:57 NikxDa

はあなたがちょうど完了したときにコールバック関数を設定する必要があり、その

<script> 
    $(function(){ 
     $('.insert_external').load("external.html",function(){ 
      setText(); 
    }); 
    }); 
</script> 

<script> 
    $(function(){ 
     function setText(){ 
      length = document.getElementsByClassName("ToChange").length; 
      for (i = 0; i < length; i++) { 
       document.getElementsByClassName("ToChange")[i].innerHTML = "New Text"; 
      } 
     } 
    }); 
</script>

のようなものを試してみてください。

出典

2016-10-20 09:53:13 mamosek

JQueryで読み込んだページのinnerHTMLを変更するには

答えて

関連する問題