###前提・実現したいこと
カスタムデータ属性の値を使ってダミーテキスト01・02で各々の高さをそろえたいです。
class="hoge"を使ってはできのですがdata-fugaで高さを合わせようとするとうまくjsが効かず、またhogeだけでやろうとするとhogeの中の一番高いやつが、該当してしまい、ダミーテキスト01・02で各々に高さが合いません。
classをわけて関数化してしまえばいいのはわかりますが、研究目的の部分もあるのでカスタムデータ属性を使って行いたいのです。
いろいろ試したのですが、どう書けばよいかお教え願えませんでしょうか?
コードは下記の通りになります。
###該当のソースコード
html
1<div class="box"> 2 <p class="hoge" data-fuga="fuga01"> 3これはダミーテキスト01これはダミーテキスト01これはダミーテキスト01これはダミーテキスト01これはダミーテキスト01 4</p> 5<p class="hoge" data-fuga="fuga01"> 6これはダミーテキスト01これはダミーテキスト01これはダミーテキスト01これは 7</p> 8<p class="hoge" data-fuga="fuga01"> 9これはダミーテキスト01これはダミーテキスト01これはダミーテキスト01これはこれはダミーテキスト01これはダミーテキスト01これはダミーテキスト01これはこれはダミーテキスト01これはダミーテキスト01これはダミーテキスト01これは 10</p> 11</div> 12 13<div class="box"> 14 <p class="hoge" data-fuga="fuga02"> 15これはダミーテキスト02これはダミーテキスト02これはダミーテキスト02これはダミーテキスト02これはダミーテキスト02これはダミーテキスト02 16</p> 17<p class="hoge" data-fuga="fuga02"> 18これはダミーテキスト02これはダミーテキスト02これはダミーテキスト02これはダミーテキスト02これはダミーテキスト02 19</p> 20<p class="hoge" data-fuga="fuga02"> 21これはダミーテキスト02これはダミーテキスト02 22</p> 23</div>
css
1.hoge { 2 float:left; 3 width:150px; 4 padding: 10px; 5 margin-right:10px; 6 border: 1px solid #000; 7} 8 9.hoge:last-child { 10 margin-right:0; 11} 12 13.box { 14 clear:both 15}
js
1$(function(){ 2 var maxHeight = 0; 3 4 $('.hoge').each(function(){ 5 6 if($(this).height() > maxHeight){ 7 maxHeight = $(this).height(); 8 } 9 }); 10 $('.hoge').height(maxHeight); 11})
###試したこと
$('.hoge')をdata-fugaを$('data-fuga')にしたり、
eachの中にvar test = $(this).attr('data-fuga');でdata-fugaを取り出して、属性で高さそろえをしてみたりしましたが、うまくいかなかったです。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/12/15 09:12