質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

3144閲覧

<a>タグの適用範囲を変更したい

castail

総合スコア117

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2015/09/14 01:35

編集2015/09/14 02:20

<a>タグの適用範囲を変更したいです。

煩雑で恐縮ですが、念のため本環境の構成を厳密に記します。

lang

1<seciton id="hogeid1"> 2<ul> 3 <li> <img・・・・・・> 文字列文字列文字列文字列文字列 4 <div class="hoge1"> 5 <h4>・・・・・・</h4> 6 <dl>・・・・・・ </dl> 7 <p>・・・・・・</p> 8 <div class="hoge2"> <a data-kz-track-on-click="・・・・" href="・・・・・・" class="hoge3">文字列文字列</a> </div> 9 </div> 10 </li> 11 <li> <img・・・・・・> 文字列文字列文字列文字列文字列 12 <div class="hoge1"> 13 <h4>・・・・・・</h4> 14 <dl>・・・・・・ </dl> 15 <p>・・・・・・</p> 16 <div class="hoge2"> <a data-kz-track-on-click="・・・・" href="・・・・・・" class="hoge3">文字列文字列</a> </div> 17 </div> 18 </li> 19 <li> <img・・・・・・> 文字列文字列文字列文字列文字列 20 <div class="hoge1"> 21 <h4>・・・・・・</h4> 22 <dl>・・・・・・ </dl> 23 <p>・・・・・・</p> 24 <div class="hoge2"> <a data-kz-track-on-click="・・・・" href="・・・・・・" class="hoge3">文字列文字列</a> </div> 25 </div> 26 </li> 27282930313233</ul> 34</section> 35 36<seciton id="hogeid2"> 373839</section> 40 41<seciton id="hogeid3"> 424344</section> 45464748

この構成で<li>内の<a>の適用範囲を下記2パターンで変更したいです。

(1)<li>の内側全体を<a>で囲むよう適用(既存<a><span>へ変更)

lang

1 <li> 2 <a data-kz-track-on-click="・・・・" href="・・・・・・" class="hoge3"> 3 <img・・・・・・> 文字列文字列文字列文字列文字列 4 <div class="hoge1"> 5 <h4>・・・・・・</h4> 6 <dl>・・・・・・ </dl> 7 <p>・・・・・・</p> 8 <div class="hoge2"> <span class="hoge3">文字列文字列</span></div> 9 </div> 10 </a> 11 </li>

(2)<img>のみに追加適用(既存<a>はそのまま)

lang

1 <li> 2 <a data-kz-track-on-click="・・・・" href="・・・・・・" class="hoge3"><img・・・・・・></a> 3 文字列文字列文字列文字列文字列 4 <div class="hoge1"> 5 <h4>・・・・・・</h4> 6 <dl>・・・・・・ </dl> 7 <p>・・・・・・</p> 8 <div class="hoge2"> <a data-kz-track-on-click="・・・・" href="・・・・・・" class="hoge3">文字列文字列</a> </div> 9 </div> 10 </li>
<li>と<section>は動的に増減するため数は決まっていません。 <section>内に<ul>は1つ、<li>内の構成は共通です。 <a>の属性は「data-kz-track-on-click」「href」「class」全て継承が必要です。

ご教授のほどよろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

こんにちは。

(1)<li>の内側全体を<a>で囲むよう適用
<a>のcssで display: block; 指定するとリンクの範囲が広がります。
参考:リンクのクリック範囲を広げる:CSS小技

(2)<img>のみに追加適用(既存<a>はそのまま)
<a>タグにidを指定
<img>タグを<label>タグで囲む
<label>の for要素に <a>のidを指定
でいけないですか?

投稿2015/09/14 02:27

kaputaros

総合スコア1844

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

HTML5であれば、aタグでdivなどを囲むことはOKになったので

(1)<li>の内側全体を<a>で囲むよう適用

これはこのまま<li>直下に<a>タグを書いてしまっても大丈夫です。

(2)<img>のみに追加適用(既存<a>はそのまま)

これは(1)とは別のリンクでしょうか?
同じリンクであれば、<a>タグの中に<a>タグを置くことはできないので、リンクで囲まないが良いかと思います。
違うリンクであれば(1)も変更しなければならないので下記で実現できそうな気がします。
0. <img>を(2)の<a>で囲み<div class="hoge1">を(1)の<a>タグで囲む
0. paddingなどで本来<img>タグの置かれる部分までエリアを広げる
0. (2)のz-indxを(1)より上にしてpositionを使って(1)のエリアの上に重ねる
ただ、全体がリンクっぽいのにクリックする場所で遷移先が違うとUI的には少しキモチワルイかもしれません。

参考: HTML aタグの中にaタグを入れると崩れる


或いは、(2)の<img>を別の<a>タグで囲み、(1)のリンクはそのままにしておき、javascriptで<li>クリック時に(2)のエリアでなければ、a.hoge3をクリックしたことにするイベントを付けてしまう方法でも実現できそうにかと思います。


追記: jQueryでHTML構造を変更する方法
a.hoge3をcloneして使えばclassやdata-kz-track-on-clickなど丸っと持って行くことができます。
まだリファクタリング出来ると思いますが、ざっくり処理を書いてみます。
(1)

javascript

1jQuery('#hogeid1').find('li').each(function(i, elm) { 2 var $li = jQuery(elm), 3 $content = jQuery($li.html()), // 構造変更の度にレンダリングしないように外に取り出して使う 4 $a = $li.find('a.hoge3').clone(), 5 $linkArea = $content.find('.hoge2'); 6 // aタグをspanに置き換える 7 $linkArea.html( '<span class="hoge3">' + $linkArea.text() + '</span>' ); 8 // aタグでラップしたものでliの中身を置き換える。 9 $li.html( $a.html( $content ) ); 10});

(2)

javascript

1jQuery('#hogeid1').find('li').each(function(i, elm) { 2 var $li = jQuery(elm), 3 $a = $li.find('a.hoge3').clone(), 4 $img = $li.find('img'); 5 // imgタグをaタグでラップしてliの先頭に追加 6 $li.prepend( $a.html($img) ); 7});

'a.hoge3'は.hoge3でも大丈夫です。jQueryのclassセレクタはタグ名があった方が高速な場合もあるようです。
参考: jQueryのclassセレクタに要素名を付ける

投稿2015/09/14 01:57

編集2015/09/14 03:22
KiKiKi_KiKi

総合スコア596

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

castail

2015/09/14 02:18

KiKiKi_KiKi様 ご回答ありがとうございます。 ご説明が悪くうまく伝わっていなかったようです。 今回は特殊な事情でhtmlを直接変更できずjavascriptで表示時に動的に整形を変えたいと考えています。 なお具体的な理想コードを明記いたします。 = (1)<li>の内側全体を<a>で囲むよう適用 <li> <a data-kz-track-on-click="・・・・" href="・・・・・・" class="hoge3"> <img・・・・・・> 文字列文字列文字列文字列文字列 <div class="hoge1"> <h4>・・・・・・</h4> <dl>・・・・・・ </dl> <p>・・・・・・</p> <div class="hoge2"> <span class="hoge3">文字列文字列</span></div> </div> </a> </li> - (2)<img>のみに追加適用(既存<a>はそのまま) <li> <a data-kz-track-on-click="・・・・" href="・・・・・・" class="hoge3"><img・・・・・・></a> 文字列文字列文字列文字列文字列 <div class="hoge1"> <h4>・・・・・・</h4> <dl>・・・・・・ </dl> <p>・・・・・・</p> <div class="hoge2"> <a data-kz-track-on-click="・・・・" href="・・・・・・" class="hoge3">文字列文字列</a> </div> </div> </li> = ご回答の程よろしくお願い致します。
KiKiKi_KiKi

2015/09/14 03:27

castail さま なるほど。質問の意図を理解しました。 長くなりそうだったので、解答欄に追記しました。 処理はざっくり書いたものなので、もう少しリファクタリングとか出来るとおもいます。 Ajaxなどで追加される場合は都度全部をeach()で回すと良くないので、変更する処理だけ別関数にしておき、初期化時はeach()内でその関数を呼び出して整形し、Ajaxで追加される時は追加する分だけを同じ関数で整形するなどとするのが良いかと思います。 また、このリスト内に何らかのイベントを先に付けていると上手く動作しなくなる可能性がありますので、初期化後か、jQuery(document).onなどでイベントを登録するなど工夫が必要になるかと思います。
castail

2015/12/12 08:32 編集

KiKiKi_KiKi様 ご回答ありがとうございました。 こちらの内容で検証したいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問