使用 jQuery 遍历 DOM答案

【问题标题】：Traversing the DOM using jQuery使用 jQuery 遍历 DOM
【发布时间】：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 是一个有用的指南

标签： jquery

【解决方案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://stackoverflow.com/Content/Img/stackoverflow-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( '记录'）

【讨论】：

我认为他需要将切换应用到下一条记录，而不是全部。