Проблема с селектором jQuery

Question

    <div class="full_width_last">

        <div class="sub_div1" style="display:none">
            <h2>Join</h2>
            <p>Click here to sign up.</p>
            <p>ID: 48</p>
        </div>

        <h4>Boston</h4>
        <p>ioiuy</p>
        <a href="#" class="join_button">Join</a>

    </div>

    jQuery('.join_button').bind('click', function(){



        console.log(jQuery(this));
        console.log(jQuery(this).parent());
        console.log(jQuery('.sub_div1', jQuery(this).parent()));
        return false;
    }

У меня проблемы с селектором jQuery: jQuery('.sub_div1', jQuery(this).parent())

По какой-то причине библиотека не находит нужный мне div.

Оба:

console.log(jQuery(this));
            console.log(jQuery(this).parent());

работает как положено.Кто-нибудь знает, почему я не могу получить ссылку на .sub_div1?

EDIT 1 : пробовал кэшировать родительский элемент, но это не сработало:

console.log(jQuery(this));
        //console.log(jQuery(this).parent());
        var p = jQuery(this).parent();
        console.log(jQuery('.sub_div1', p));

EDIT 2 jQuery(this).parent().children(".sub_div1") также не работал

Этот код дал такой результат:

console.log(jQuery(this));
console.log(jQuery(this).parent());
console.log(jQuery(this).parent().children(".sub_div1"));

Query(a.join_button #✉)
jQuery(div.full_width_last)
jQuery()

Answer 1

попробуйте использовать это, jQuery(this).parent().children(".sub_div1")

Answer 2

(function($){    
    $('.join_button').bind('click', function(e){
        e.preventDefault();
        console.log($(this).siblings('.sub_div1'));
    });
})(jQuery);

Answer 3

Любопытно, почему вы получаете родителя, а затем детей, а не просто jQuery(this).siblings('.sub_div1')

Однако, основываясь на вашем комментарии, вы не предоставляете полную (или, по крайней мере, достаточную) детали вашего HTML.

Answer 4

Попробуйте jQuery(this).parent().eq(".sub_div1")