内包する子要素のリンクを別子要素にも適用したい

Question

内包する子要素のリンクを別子要素にも適用したいです。

具体的には、以下の構成で「hoge1」をクリックすると「hoge2」と同じURLに移動したいです。

<div class="hoge">
<div class="hoge1"></div>
<a href="XXXXXXX" class="hoge2"></a>
</div>

hogeは連続して複数存在し、それぞれのhoge内で処理したいので「.each」を使用した形でご教授願えればと思います。

Answer 1

先の回答されたものとほぼ同じですが。ご参考までに。

<div class="hoge">
	<h3>test: ヤフー</h3>
	<div class="hoge1">hoge1</div>
	<a href="http://www.yahoo.co.jp/" class="hoge2">hoge2</a>
</div>

<div class="foo">
	<h3>test: DOM構造が異なるケース</h3>
	<div class="hoge1">hoge1</div>
	<a href="http://www.rakuten.co.jp/" class="hoge2">hoge2</a>
</div>

<h3>test: DOM構造が異なるケース2</h3>
<div class="hoge1">hoge1</div>
<a href="http://www.rakuten.co.jp/" class="hoge2">hoge2</a>

<div class="hoge">
	<div class="foo">
		<h3>test: DOM構造が異なるケース3</h3>
		<div class="hoge1">hoge1</div>
		<a href="http://www.rakuten.co.jp/" class="hoge2">hoge2</a>
	</div>
</div>

$(function() {
	// hoge1がクリックされたら、親のdiv.hogeのa.hoge2のhrefを取得し、そこへ遷移させる
	var link;
	$('.hoge1').on('click', function(e){
		// .hogeの中の.hoge2へアクセスし、hrefの値を取得
		link = $(this).parents('.hoge').find('.hoge2').attr('href');
		console.log('link: ', link);
		// linkの値が取得できていれば、リンク先に遷移させる
		if (link !== undefined) {
			window.location.href = link;
		}
	});
});

link = $(this).parents('.hoge').find('.hoge2').attr('href')
ここの部分ですが、
.hoge2の1つ親が必ず.hogeであるならば、
$(this).parent()
でも良いですが、
$(this).parents('.hoge')
の方が、他のケースも担保できるので良さそうです。

下記ご参考までに。
http://qiita.com/yamamoto_hiroya/items/358c55db38c481a2c1b0
http://tohokuaiki.hateblo.jp/entry/20120912/1347443736

Comments

[castail]

ご回答ありがとうございます。
ご教授いただいた内容で実現できました！
感謝申し上げます。

Answer 2

下記でどうでしょうか。「.each」は必要ないですね。
自分の親要素内の子要素から a要素のURLを取得してページ遷移するということです。

<div class="hoge">
  <div class="hoge1">hoge1</div>
  <a href="https://www.google.co.jp/" class="hoge2">google</a>
</div>
<br>
<div class="hoge">
  <div class="hoge1">hoge1</div>
  <a href="http://www.yahoo.co.jp/" class="hoge2">yahoo</a>
</div>

$(function() {
  $('.hoge div').click(function() {
    window.location.href = $(this).parent().children('a').attr("href");
  });
});