jquery - jQueryを使用してdiv内にあるリンクを開く方法は?

Question

私は次のdivを持っています:

<div class="panel-heading">
    <h3 class="panel-title"><a href="#">Test Title</a> <small>Aug 24, 2013</small></h3>
</div>

.panel-headingユーザーが（そのdivの任意の部分）をクリックすると、リンクされたものを開くようにしたいと思いますTest Title。この場合、開く必要があります#。jQueryを使用してこれを行うにはどうすればよいですか?

Answer 1

$('.panel-heading').click(function(){ 
    window.location.href = $(this).find('a').attr('href'); 
});

デモ

Answer 2

状況によって<a>は、そこに日付も含めて、div を埋めるように display:block でスタイリングした方がよい場合があります。その場合、JS は必要ありません。

<div class="panel-heading">
    <h3 class="panel-title"><a href="#">Test Title <small>Aug 24, 2013</small></a></h3>
</div>

.panel-heading a {display:block;}

Answer 3

このようにしてみてください：

 $('.panel-heading').click(function(){
    element.find(">:first-child").click();
    });

Answer 4

div をリンクでラップするだけのほうがよい:

<a href="#">
    <div class="panel-heading">
        <h3 class="panel-title">Test Title <small>Aug 24, 2013</small></h3>
    </div>
</a>

ただし、JavaScriptを使用する必要がある場合...

$( ".panel-heading" ).on( "click", function() {
    var tgt = $( this ),
        href = $( "a", tgt ).attr( "href" );
    window.location.href = href;
});