Вопрос выбора jQuery

Question

Я работаю со скриптом jQuery, который довольно далеко продвинул меня, но я как бы ударил гору, которую, похоже, не могу исправить.

На этом jsFiddle я смоделировал проблему: http://jsfiddle.net/nRD4L/2/

Итак, это сценарий, который я использую, он позволяет мне щелкнуть на отрезке и дать ему функцию, которая подойдет.Проблема немного в селекторе, потому что теперь он работает так, что он выбирает следующий div после диапазона для выполнения этой функции, но из-за некоторого стиля у меня не может быть этого div рядом с span, он должен бытьнесколько элементов перед ним.

jQuery(document).ready(function() {
jQuery('.social_media_updates_extended_view').hide();

jQuery(".wrapper_update_extend span").css('cursor', 'pointer').click(function() {
    var $this = $(this);
    $('.social_media_updates_extended_view').not($this.next("div")).fadeOut(200);
    $this.next("div").fadeToggle(200);
    });

});

Я сделал пример на jsFiddle: На этом jsFiddle я смоделировал проблему: http://jsfiddle.net/nRD4L/2/ здесь вы должны увидеть проблему.Есть 4 элемента span, которые можно нажимать, но работают только два нижних, потому что div находится рядом с span, но мне нужно найти способ заставить верхние два div работать так же, как нижние.

Answer 1

рабочий DEMO jsFiddle

используемый код:

$('.social_media_updates_extended_view').hide();
$('.btnFadeIn').css('cursor', 'pointer');

$(".btnFadeIn").click(function() {    
    var $this = $(this);    
    if ( $this.hasClass('active')){return;}

    $('.social_media_updates_extended_view').fadeTo(300, 0);
    $('.active').removeClass('active');
    $this.addClass('active').parents('.wrapper_update').find('.social_media_updates_extended_view').fadeTo(300, 1);    
});

Answer 2

добавить $this.parent(".wrapper_update_extend").siblings(".social_media_updates_extended_view").fadeToggle(200);

под $this.next("div").fadeToggle(200);

Приведенное выше выберет родителя .wrapper_update_extend, а затем родного брата .social_media_updates_extended_view

Проверьте больше для parent() & siblings().

Демо: http://jsfiddle.net/nRD4L/4/

Answer 3

Вместо выбора следующего div в dom, вы можете выбрать элемент по его атрибуту id , используя селектор # (как в CSS).

Так что, если вы дадите идентификатор элементу html, вы хотите fadeToggle (), например, элементу DIV:

<div id='myDiv'>The div's content</div>;

Тогда вы можете fadeToggle () с помощью:

$('#myDiv').fadeToggle(200);

Предполагая, что вы можете установить идентификаторы элементов посредством обработки на стороне сервера, вы можете рассмотреть возможность определения идентификаторов в парах.

Вы можете увидеть, как это работает на http: //jsfiddle.net/nRD4L/14/.