AJAX JQuery 値取れない

AJAXでHTMLを取得した際、セレクタで要素を指定するとundefinedで取得されます。
なぜでしょうか？

JQuery 2.2.3

<!-- AJAXで取得するデータ -->
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<span>span1</span>
<table id="test-table">
    <tr>
        <td>td1</td>
        <td></td>
        <td></td>
        <td><span>span2</span></td>
    </tr>
</table>
</body>
</html>

// JQueryで解析
var test1 = $("table tr", result).html(); // test1 == undefined
var test2 = $("#test-table", result).html();	  // test2 == undefined
var test3 = $("body", result).html();     // test3 == undefined
var test4 = $("span", result).html();     // test4 == undefined
var test5 = $("td", result).html();       // test5 == "td1"
var test6 = $("tr td", result).html();    // test6 == "td1"
var test7 = $("tr", result).parent().html(); // test7 == "<tr><td>td1</td><td></td><td></td><td><span>span2</span></td></tr>"

同じような動作を確認できるサンプルを作成しました。
なおtest4の値がなぜ取れたのか不明です。。(取得できたのなぜ二つ目?)

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script type="text/javascript">
	$(function(){
	
		var result = '<html><head></head><body><span>span1</span><table id="test-table">    <tr>        <td>td1</td>        <td></td>        <td></td>        <td><span>span2</span></td>    </tr></table></body></html>';

      	var test1 = $("table tr", result).html(); 
		var test2 = $("#test-table", result).html();      
		var test3 = $("body", result).html();     
		var test4 = $("span", result).html();     
		var test5 = $("td", result).html();       
		var test6 = $("tr td", result).html();    
		var test7 = $("tr", result).parent().html();
      	
      	console.log(test1); // test1 == undefined
      	console.log(test2); // test2 == undefined
      	console.log(test3); // test3 == undefined
      	console.log(test4); // test4 == "span2"
      	console.log(test5); // test5 == "td1"
      	console.log(test6); // test6 == "td1"
      	console.log(test7); // test7 == "<tr><td>td1</td><td></td><td></td><td><span>span2</span></td></tr>"
	});
</script>
</head>
</html>

退会済みユーザー

2016/10/05 06:58

「AJAXで取得するデータ」というのは、もともとの画面のどこにどのように表示されるのですか？ iframe とかですか？

ranran

2016/10/05 09:44

一覧画面において、非同期でHTMLを取得して画面の一覧を切りかえるつもりです。

退会済みユーザー

2016/10/05 09:47

回答者が、その動作を再現できる最小限のミニマムソースを提示してください。

行動規範の内容に同意します

回答2件

ベストアンサー

$(result) の結果を見ればわかると思いますが以下のように html, body タグ以下のみになってしまいます

[<span>span1</span>, <table id="test-table">…</table>]

これを基準に .find するので table や #test-table がマッチしません

XML パースするという手もありますが HTML が XML 準拠で書かれてないことのほうが多いので、 jQuery じゃない DOMParser 使うのはどうですか？

javascript
1var parser = new DOMParser()
2var dom = parser.parseFromString(result, "text/html")
3$(dom).find("table tr").html()
4// "        <td>td1</td>        <td></td>        <td></td>        <td><span>span2</span></td>    "

html と body タグ無視してもいいならどこかに append して、親要素に移動して find という手も

javascript
1$(result).appendTo("<div>").parent().find("table tr").html()

投稿2016/10/05 15:04

lazex

総合スコア604

ranran

2016/10/06 00:51

回答ありがとうございました！

行動規範の内容に同意します

どうも要素に入れてしまわないとDOM（？）にならないようです。

JavaScript
1// result = $("<div></div>").html( result ); // bodyが取得できない https://jsfiddle.net/bzpryaoy/
2   result = $( $.parseXML( result ) );
3```**動くサンプル：**[https://jsfiddle.net/bzpryaoy/1/](https://jsfiddle.net/bzpryaoy/1/)