jQuery 嵌套类选择器

Question

我目前正在尝试解决我正在使用的 jQuery 脚本的一个小但烦人的问题。您可以在此处查看问题和脚本： http://jsfiddle.net/nRD4L/12/

我正在使用此脚本

(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>

因此，我需要对脚本进行一些更改，以在 .update_content 类中找到 .social_media_updates_extended_view 类。

有人有这方面的建议吗？

Answer 1

这里是一个工作示例。但是我不确定您为什么要这样改变内容的结构？

Answer 2

将 $container 设置为适当的选择器（如果找不到更好的选择器，则设置为 $('body')）

Answer 3

您拥有的代码假设了一些事情：

您想要的所有内容都位于 .update_content 下。

.wrapper_update_extend 前面是 .social_media_updates_extended_view，这就是您要显示的视图。

您可以使用下面的代码来破坏这两件事。我无法从代码中看出你想要的第二件事是什么，所以恐怕我无法指出如何改进它。

Answer 4

这是一个工作的 jsfiddle。 http://jsfiddle.net/YsMwj/
我将容器从 更改

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

为

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

然后将 $view 的选择器从 更改

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

为

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