【JS--DOM-节点操作3】-jQuery 里的节点操作 (未完待续)-优快云博客

本文通过一个具体的案例展示了如何使用jQuery的toggle方法来控制相邻div元素的显示与隐藏，并解释了为何需要额外添加一层parent()调用来确保代码在不同浏览器中的一致性行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.先看一个案例：

<div>
<table>
<tr>
<td>
<span></span>
</td>
</tr>
</table
</div>

<div>
</div>
$(document).ready(function() {
 $("span").toggle(function() {
  $(this).parent("td").parent("tr").parent("table").parent("div").next("div").hide('slow');
 }, function() {
  $(this).parent("td").parent("tr").parent("table").parent("div").next("div").show('slow');
 });
});

为什么这么写不能实现把下面那个div  hide和show。先看正解：

$(document).ready(function() {
 $("span").toggle(function() {
  $(this).parent().parent().parent().parent().parent().next().hide('slow');
 }, function() {
  $(this).parent().parent().parent().parent().parent().next().show('slow');
 });
});
多一层parent():jQuery为了兼容浏览器，自动会在table标签里加入<tbody>标签，因为FF相对于IE对table标签解析要麻烦些的，所有js代码里要多加一层.parent() .所以写HTML代码时，要注意兼容各个浏览器，比如写table时记得加上thead，tbody标签，这样更能遵循W3C标准。