jQuery嵌套類選擇器

我目前正試圖弄清楚我正在使用的jQuery腳本的一個小問題，你可以看到這裏的問題和腳本：http://jsfiddle.net/nRD4L/12/jQuery嵌套類選擇器

我使用這個腳本

(function($, undefined) { 
$(document).ready(function() { 
    var $container = $(".update_content"); 

    $container.find(".social_media_updates_extended_view").hide(); 

    $container.delegate(".update_extend .btnFadeIn", "click", function(event) { 
     var $view = $(this).closest(".wrapper_update_extend").prev(".social_media_updates_extended_view").stop(true).fadeToggle(200); 

     $container.find(".social_media_updates_extended_view").not($view[0]).stop(true).fadeOut(200); 
    }) 
}) 
})(jQuery);

隨着HTML腳本如下工作正常，但當我做一個小變化（看看下面的HTML），它由於HTML結構發生變化而無法工作。上述

<div class="wrapper_update"> 
<div class="update_content"> 
    <div class="social_media_updates_extended_view"> 
     <p>Karel de Bruin</p> 
    </div> 
    <div class="wrapper_update_extend"> 
     <div class="update_extend"> 
      <span class="btnFadeIn">fade button span</span> 
     </div> 
    </div> 
</div>

的HTML工作正常，但在HTML下面不起作用，因爲現在的DIV .wrapper_update_extend不是div.update_content內。

<div class="wrapper_update"> 
<div class="update_content"> 
    <div class="social_media_updates_extended_view"> 
     <p>Karel de Bruin</p> 
    </div> 
    <p>content</p> 
</div> 
<div class="wrapper_update_extend"> 
    <div class="update_extend"> 
     <span class="btnFadeIn">fade button span</span> 
    </div> 
</div>

所以我需要改劇本了一下，找到該類.social_media_updates_extended_view witihin類.update_content。

任何人都有這個提示嗎？

來源

2011-08-21 Peter Boomsma

Here是一個工作的例子。但是我不確定你爲什麼要改變你的內容結構？

來源

2011-08-21 16:19:41 rlemon

乾杯！做了一些改變（選擇哪些元素需要顯示/隱藏），它完美的工作！真的很高興你能幫我解決它今晚！ –

你的代碼假定幾件事情：

你想要的一切是.update_content下。

.wrapper_update_extend之前是.social_media_updates_extended_view，這就是你想要顯示的那個。

你用下面的代碼打破這兩個事情。我不能從代碼中知道你想要的第二件事情，所以我不能指出如何改進它。

來源

2011-08-21 15:52:25 Johan

設置$container到適當的選擇（或$('body')，如果你不能找到更好的一個）

來源

2011-08-21 15:56:26

這是一個工作jsfiddle。 http://jsfiddle.net/YsMwj/
我改變了容器從

var $container = $(".update_content");

到

var $container = $(".wrapper_update");

然後從

var $view = $(this).closest(".wrapper_update_extend").prev(".social_media_updates_extended_view").stop(true).fadeToggle(200);

改變了選擇器，用於向$view

var $view = $(this).closest(".wrapper_update_extend").prev(".update_content").children(".social_media_updates_extended_view").stop(true).fadeToggle(200);

來源

2011-08-21 16:19:52 ace

我認爲這樣可以解決它，但它確實沒有解決問題。底部跨度仍然不顯示它需要的div。 –

Ah lemme check ...這可能是一個CSS問題。通過底部跨度，你的意思是這個跨度淡入淡出按鈕範圍'？ – ace

嘿王牌，感謝您的幫助，但似乎雷爾蒙已經解決了這個問題！ –

jQuery嵌套類選擇器

回答

相關問題