对动态元素使用 JQuery 选择器和“this”

Posted 2023-05-09

【中文标题】对动态元素使用 JQuery 选择器和“this”

【英文标题】：Using JQuery selectors and "this" for dynamic elements

【发布时间】：2013-02-03 05:04:28

【问题描述】：

我有一个包含大量文档的页面，客户希望用户能够点击页面上列出的每个文章/项目，并在其下方打开一个小的详细信息窗格来展示内容。

我知道这很容易做到，尤其是使用 JQuery，但我并不精通该语言，并试图尝试使用这种动态功能。有超过 50 个文档，因此使用“this”并试图保持动态而不是显式调用 50 个元素中的每一个（并且还拖慢加载时间）的原因。

这是我的 html（我只包含了列表中的一个元素）...

    <ul class="paging" id="paging">
                <li><a href="">Economics of Ethanol and Bio-butanol as Gasoline Blendstocks<br />
                <strong>Categories:</strong> Oxygenated Fuels Issues, Bio-fuel Economics, Blendstock Valuation, Refining Economics, Refinery Modeling</a>
                <ul style="background:#f8f8f8; width:500px; height:200px;"><li>Here is the text that should appear beneath woot</li></ul>

                </li>

这是我的 JQuery 位...

    <script type="text/javascript">
        $(document).ready(function() 

            $('ul.paging > li > ul').hide();

            $('ul.paging > li').click(function() 

                $(this > ul).slideToggle();

            );
        );


    </script>

我的元素被正确隐藏了，所以我假设我的选择器没问题？无论如何，推出没有工作功能。有什么想法吗？

谢谢您，非常感谢您的所有帮助！就像我说的，这很新。 :) 再次感谢！

【参考方案1】：

this 的值是一个 DOM 元素。您需要将其用作 jQuery 的 DOM 遍历方法的基础，例如 .children()。

$(this).children("ul").slideToggle();

【讨论】：

谢谢 - 这对我来说完美无缺。现在...我该如何创建它，以便当我打开一个，然后尝试打开另一个时，前一个会在新的打开时关闭。不知道如何从那里开始......任何想法都值得赞赏！再次感谢大家！

@user1873857：表示打开的是哪个类，打开时的类。然后您可以选择具有该类的当前元素，将其关闭，删除该类，将该类添加到新元素中，然后打开该类。 .addClass() 和 .removeClass() 方法用于此目的。

【参考方案2】：

$(this > ul) 应该看起来像 $('ul', this)

或者

$(this).find('ul').slideToggle();

【讨论】：

"> ul" 语法已弃用。

【参考方案3】：

这里的选择器很可能是你的问题：

$(this > ul).slideToggle();

你最好使用这个：

$(this).find('ul').slideToggle();

我还建议默认隐藏ul 的 CSS 样式，这样它们就不会在文档就绪事件之前在屏幕上闪烁。