使用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」

回答

相關問題