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 strcuture的更改，它不起作用。

<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 wicein class .update_content。

任何人都有这方面的提示？

Answer 1

Here是一个有效的例子。但是我不确定你为什么要这样改变你的内容结构？

Answer 2

您所拥有的代码假设了一些内容：

您想要的一切都在.update_content下。

.wrapper_update_extend前面有一个.social_media_updates_extended_view，那就是你想要展示的那个。

你用下面的代码打破了这两件事。我无法从代码中看出你想要的第二件事，所以我不能指出如何改进它我害怕。

Answer 3

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

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);

jQuery嵌套类选择器

4 个答案: