Issue with jQuery selector

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

I'm having trouble with the jQuery selector: jQuery('.sub_div1', jQuery(this).parent())

For some reason the library isn't finding the div I'm searching for.

Both:

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

work as expected. Anyone know why I can't get a reference to .sub_div1?

EDIT 1 : Tried caching the parent but this did not work:

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") also did not work

This code produced this result:

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

试试jQuery(this).parent().eq(".sub_div1")

Answer 3

Curious why you're getting the parent and then the children, why not just jQuery(this).siblings('.sub_div1')

However, based on your comment, you're not supplying the full detail (or at least enough) of your HTML.

Answer 4

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