jquery - JQuery .html 関数

Question

jquery .get を使用してページのコンテンツをロードしています。ページは正常に読み込まれ、出力は変数データに保存されます。そのデータ変数から「result1」のIDを持つ特定のdivを取得して、ページに配置したいだけです。変数データからこの特定の要素を解析するのに問題があります。すべての要素がページに配置されているようです。これは簡単な修正だと思いますが、気が狂ってしまいます。

解析を試みていない基本コードは次のとおりです。

$.get("test.php?id=" + $(this).attr('id') + "&auth=1" ,function(data){
        $("#details1").html(data);
  });

データの結果は次のとおりです。

<div id='result1'>
<table>
<tr>
<td>testa</td>
<td>testb</td>
</tr>
</table>
</div>

<div id='result2'>
<table>
<tr>
<td>testc</td>
<td>testd</td>
</tr>
</table>
</div>

Answer 1

load()を使用できます

$("#details1").load("test.php?id=" + $(this).attr('id') + "&auth=1 #result1");

.load() メソッドは、$.get() とは異なり、挿入するリモート ドキュメントの一部を指定できます。これは、url パラメータの特別な構文で実現されます。文字列に 1 つ以上のスペース文字が含まれている場合、最初のスペースに続く文字列の部分は、読み込まれるコンテンツを決定する jQuery セレクターと見なされます。

または、自分で同じことを行うことができます：

$.get("test.php?id=" + $(this).attr('id') + "&auth=1" ,function(data){
    $("#details1").append( $('<div />').append(data).find('#result1') );
    $("#details2").append( $('<div />').append(data).find('#result2') );
    $("#details3").append( $('<div />').append(data).find('#result3') );
});

Answer 2

この構文を使用して、要素result1内の divのみを読み込みます。details1

$('#details1').load("test.php?id=" + $(this).attr('id') + "&auth=1 #result1');

Answer 3

$.get("test.php?id=" + $(this).attr('id') + "&auth=1" ,function(data){
    $("#details1").html($(data).filter('#result1'));
});