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

我有一个页面，其中包含大量文档，希望用户能够点击页面上列出的每篇文章/项目以及一个小的详细信息窗格在它下面打开令人陶醉的内容。使用JQuery选择器和动态元素的“this”

我知道这很容易做到，特别是使用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>

我的元素被正确隐藏，所以我假设我的选择器是好的？总之，推出时没有任何工作功能。有什么想法吗？

谢谢各位的帮助，非常感谢！就像我说的，对此很新颖。：）再次感谢！

来源

2013-02-18 alex.mo.07

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

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

来源

2013-02-18 17:23:27

谢谢 - 这个完美地为我工作。现在...我怎么去创造它，以便当我打开一个时，然后尝试打开另一个，当前一个打开时，前一个关闭。不知道如何从那里开始...任何想法都很感激！再次感谢大家！ – 2013-02-19 21:51:19

@ user1873857：指示哪一个打开时打开一个类。然后，您可以选择该类的当前元素，关闭它，删除类，将类添加到新类，然后打开该类。 '.addClass（）'和'.removeClass（）'方法用于此。 – 2013-02-19 21:57:13

$(this > ul)应该像$('ul', this)

或者

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

来源

2013-02-18 17:23:29 thecodeparadox

不建议使用'>> ul“'语法。 – 2013-02-18 17:26:25

...或者*已被弃用。他们删除了他们的通知 – 2013-02-18 17:29:00

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

$(this > ul).slideToggle();

你可能最好使用此：

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

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

来源

2013-02-18 17:26:16

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

回答

相关问题