Селектор вложенных классов jQuery - PullRequest
Новая
       9

Селектор вложенных классов jQuery

0 голосов
/ 21 августа 2011

Я сейчас пытаюсь выяснить небольшую, но раздражающую проблему со скриптом 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>

Поэтому мне нужно немного изменить скрипт, чтобы найти класс .social_media_updates_extended_view с классом .update_content.

Кто-нибудь получил совет для этого?

Ответы [ 4 ]

2 голосов
/ 21 августа 2011

Здесь - рабочий пример.Однако я не уверен, почему вы захотите изменить структуру своего контента таким образом?

0 голосов
/ 21 августа 2011

Вот рабочий 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);
0 голосов
/ 21 августа 2011

Установите $container на соответствующий селектор (или на $('body'), если вы не можете найти лучший)

0 голосов
/ 21 августа 2011

Код, который вы имеете, предполагает несколько вещей:

все, что вы хотите, находится под .update_content.

.wrapper_update_extend, перед которым стоит .social_media_updates_extended_view, и это то, что вы хотитечтобы показать.

Вы ломаете обе вещи с кодом ниже.Я не могу сказать из кода, что вы хотите со вторым, поэтому я не могу указать, как его улучшить, боюсь.

...