使用 jQuery 遍历 DOM
Posted
技术标签:
【中文标题】使用 jQuery 遍历 DOM【英文标题】：Traversing the DOM using jQuery 【发布时间】：2010-09-21 03:25:31 【问题描述】：单击 IMG 后，我想进入下一个后续 DIV，以便可以根据当前显示状态显示或隐藏 DIV 内容。
这是一个 html sn-p：
<div>
<span class="expand"><img src="images/plus.gif"></span>
<span>Subject Heading</span>
</div>
<div class="record hidden">Display or Hide this text</div>
我有一些代码 (provided in another answer on this site) 可以在表格中执行此操作。我会为 img 或包含跨度设置一个事件侦听器吗？不知道如何使用 parent()、next()、sibling() 函数来解决......
另外，你如何测试你的导航是否到达了正确的元素？你可以使用警报来显示 id 或 value 吗？
任何帮助表示赞赏 谢谢
【问题讨论】：
api.jquery.com/category/traversing 是一个有用的指南 【参考方案1】：一种更简洁的方法是在折叠和展开之间切换图像的父类，然后在您的 css 中，您可以使用上下文选择器在折叠的 div 中隐藏嵌套的 div。
只要我的 2 美分。
【讨论】：
经过深思熟虑并随后得到答案的确认，以获得您所指的内容......我同意，我将探索这种类型的解决方案......感谢您的帖子【参考方案2】：这是一个工作示例：
<script type="text/javascript" src="../jquery-1.2.6.min.js"></script>
<div>
<span class="expand"><img src="x.jpg"></span>
<span>Subject Heading</span>
</div>
<div class="record hidden">Display or Hide this text</div>
<script type="text/javascript">
$(document).ready(function()
$('.expand img').toggle(
function()
$(this).parent().parent().next().hide();
,
function()
$(this).parent().parent().next().show();
);
);
</script>
请注意，我使用了两次 parent，因为事件被添加到图像中，其父级是 span，其父级是 div。
【讨论】：
【参考方案3】：一个不错的地方是选择器下的 Visual jQuery Docs：http://screencasts.visualjquery.com/
我认为你正在尝试做类似的事情
$(this).parent().next('.hidden');
在您的 onClick 函数中？
希望有帮助！
【讨论】：
【参考方案4】：Alllain 是正确的，最好只对父级进行操作，然后使用 CSS 选择器显示或隐藏子级，翻转 +/- 图像等。但无论如何，here 是功能代码，可以满足您的需求以你想知道的方式：
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
$( document ).ready( function()
$( '.expand img' ).click(
function()
$(this).parents( 'div' ).eq( 0 ).siblings( '.record' ).eq( 0 ).toggleClass( 'hidden' );
);
);
</script>
<style type="text/css">
.hidden
display: none;
</style>
</head>
<body>
<div>
<span class="expand"><img src="http://***.com/Content/Img/***-logo-250.png"></span>
<span>Subject Heading</span>
</div>
<div class="other">Don't care about this</div>
<div class="record hidden">Display or Hide this text</div>
</body>
</html>
【讨论】：
如果你担心优雅降级，你会想要添加一个 【参考方案5】：这是我目前正在使用的，感谢 Adam……但我也会探索 Alllain 的建议。
$(function()
$('.expand img').toggle(
function()
$(this).parent().parent().next().show();
$(this).attr('src', 'images/minus.gif') ;
,
function()
$(this).parent().parent().next().hide();
$(this).attr('src', 'images/plus.gif') ;
);
);
【讨论】：
fwiw，我赞成艾伦的建议，因为它听起来不错。不过，我认为他应该提供一个代码示例。 此解决方案的问题在于，您完全被示例中的嵌套深度和兄弟关系所困扰。如果您嵌套更深（伟大的祖父母 div？），或者添加或重新排序兄弟姐妹（参见我的示例），则必须调整您的代码。 无论兄弟顺序或祖先距离如何，我的解决方案都能正常工作。 真正的麻烦是我没有很好地提出我的问题。该解决方案将始终适合我当前项目的需求。我将（并且已经）返回这些答案以学习更多概念。我确实赞成 Pistos 的回答，并将在未来对其进行审查。感谢所有的答案 CarolinaJay65：感谢您发布解决方案。我刚开始使用 jQuery/HTML/CSS，而且效果很好。【参考方案6】：您有多种选择：
$('.expand').click(function ()
$(".record").toggle();
);
或
$('.expand').click(function ()
$(".record").slideToggle("slow");
);
虽然如果您要根据与点击的 img 的相关性来定位下一个 div，那么您需要使用 .parent('span').parent('div').next( '记录'）
【讨论】：
我认为他需要将切换应用到下一条记录，而不是全部。以上是关于使用 jQuery 遍历 DOM的主要内容，如果未能解决你的问题，请参考以下文章