--------------------------------- 题记
在开发过程中,由于错误的操作table、tr、td标签的父子关系,浪费了很多时间。最后写测试发现在该情况下table、tr、td并不是父子关系。
--------------------------------- 代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<body>
<table id="table" border="1">
<tr id="1"><td id="td">aaa</td></tr>
<tr id="2"><td>bbb</td></tr>
<tr id="3"><td>ccc</td></tr>
<tr id="4"><td>ddd</td></tr>
</table>
<div id="div">
<div id="1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
<script type="text/javascript" src="jquery-1.8.2.js"></script>
<script type="text/javascript">
//table是一体,并不是父子关系的情况
// $("table").children().each(function(index) {
// alert(this);
// alert($(this).html("hahaha"));
// });
//是父子关系
// alert($("tr").parents("table").attr("id"));
// alert($("#td").parents("tr").attr("id"));
alert($("table").children(":first").attr("id"));
$("table tr").not(":first").not(":last").html('<p>111</p>');
alert($("#div").children(":first").attr("id"));
</script>
</html>