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嵌套类选择器

回答

相关问题