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

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

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

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

jQuery

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

Q&A

解決済

5回答

269閲覧

関数の実行表記をもっとシンプルにしたい

balls

総合スコア40

JavaScript

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

jQuery

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

0グッド

1クリップ

投稿2018/01/16 05:10

編集2018/01/16 06:02

jQueryで下記のコードを書きました。
関数 matchHeightは、高さを合わせる関数です。
上から5行目から8行目で3つのブロックに対してこの関数を適用しているのですが、もっとシンプルに一行とかで書く方法はないでしょうか?

HTML

1 <div id="hoge1"> 2 <ul class="topContMenu"> 3 <li><a href="">hogehoge</a></li> 4 <li><a href="">hogehogehogehoge<br>hogehoge</a></li> 5 <li><a href="">hogehoge</a></li> 6 <li><a href="">hogehoge</a></li> 7 <li><a href="">hogehoge</a></li> 8 <li><a href="">hogehoge</a></li> 9 <li><a href="">hogehoge</a></li> 10 </ul> 11 </div> 12 13 <div id="hoge2"> 14 <nav> 15 <ul> 16 <li><a href="">about</a></li> 17 <li><a href="">example</a></li> 18 <li><a href="">information<br>hogehoge<br>hogehoge</a></li> 19 <li><a href="">activity</a></li> 20 <li><a href="">center</a></li> 21 <li><a href="">document</a></li> 22 <li><a href="">lecture</a></li> 23 </ul> 24 </nav> 25 </div> 26 27<div id="hoge3"> 28 <div class="block"> 29 hoge3 30 </div> 31 <div class="block"> 32 hoge3<br> 33 hoge3<br>hoge3<br>hoge3<br>hoge3 34 </div> 35 </div>

jquery

1$(document).ready(function() { 2 3 var $topContentMenuHeight = $('#hoge1 .topContMenu li a'); 4 var $gnaviHeight = $('#hoge2 nav ul li a'); 5 var $blockHeight = $('#hoge3 .block'); 6 7 matchHeight($topContentMenuHeight); 8 matchHeight($gnaviHeight); 9 matchHeight($blockHeight); 10 11 12 function matchHeight($element) { 13 var heighestHeight = 0; 14 $element.each(function() { 15 var currentHeight = $(this).height(); 16 //console.log('currentHeight: ', currentHeight); 17 if (currentHeight > heighestHeight) { 18 heighestHeight = currentHeight; 19 } 20 21 }); 22 //console.log('heightestHeight: ', heighestHeight); 23 $element.height(heighestHeight); 24 } 25 26});

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

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

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

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

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

x_x

2018/01/16 05:31

この場合matchHeight()が意味のあることをしているように見えないのですが、「高さを合わせる」というのは何の高さですか?
balls

2018/01/16 05:34

<ul><li>element1</li><li>element2</li><li>element3</li></ul>  こういう感じでそれぞれ別の高さを持った要素があるとして、それを一番高い要素に別の要素の高さを合わせる、ということです。
x_x

2018/01/16 05:54

確認できるhoge1などを含むHTMLもつけてもらったほうがいいかもしれません。
balls

2018/01/16 06:03

HTMLを付けました。あと、JSも少し編集しました。
x_x

2018/01/16 06:10

なるほど。わかりました。ありがとうございます。ですが十分シンプルだと思います。実は3行ではなくたくさんあるとかなのでしょうか?
balls

2018/01/16 06:13

いえ、3行ですね、今のところは。今後もたぶん増えると思うのですが(10行とか)、こういう書き方でも十分シンプルでしょうか?
guest

回答5

0

コードゴルフっぽく、可読性無視してむりくり

js

1['.hoge','.fuga','.piyo'].map(c => $(c).height(Math.max(...$(c).map((i, e) => $(e).height()))));

サンプル

投稿2018/01/16 05:58

編集2018/01/16 05:59
turbgraphics200

総合スコア4267

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

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

balls

2018/01/16 17:31

動きました。。素晴らしいです。神業です。
guest

0

ベストアンサー

質問文に存在する項目をシンプルにリファクタリングしました。

JavaScript

1$(document).ready(function() { 2 // 関数宣言は巻き込みがあるので非推奨、変数宣言がオススメです。 3 var matchHeight = function ($element) { 4 var heighestHeight = 0; 5 $element.each(function() { 6 var currentHeight = $(this).height(); 7 //console.log('currentHeight: ', currentHeight); 8 if (currentHeight > heighestHeight) { 9 heighestHeight = currentHeight; 10 } 11 }); 12 //console.log('heightestHeight: ', heighestHeight); 13 $element.height(heighestHeight); 14 } 15 16 // 名前である必要がないので配列にしてList系のメソッドで一気に処理 17 [ 18 '#hoge1 .topContMenu li a', 19 '#hoge2 nav ul li a', 20 '#hoge3 .block' 21 ] 22 .map(function(it){return $(it)}) 23 .forEach(matchHeight); 24});

【追記】
turbgraphics200さんのコードゴルフのコードでインスピレーションが沸いたので、
最低限の可読性を維持しつつ簡素なコードに作り変えます。

JavaScript

1$(document).ready(function() { 2 [ 3 '#hoge1 .topContMenu li a', 4 '#hoge2 nav ul li a', 5 '#hoge3 .block' 6 ] 7 .map(function(it){return $(it)}) 8 .forEach(function($elements){ 9 var heights = $elements.map(function(){return $(this).height()}).get(); 10 var heighestHeight = Math.max.apply(null, heights); 11 $elements.height(heighestHeight); 12 }); 13});

ポイントは$.mapです。
【jQuery】複数の要素・配列に対して処理をするmapの使い方

eachとmapは同じコールバック関数を引数に持ち、同じように配列の中身に関数を適用していくものですが、
一般的に下記のように使い分けられます。

  • eachやforEach: 処理をしてこい、戻り値は不要だ
  • map: 関数を適用した戻り値をもってこい、戻り値を元に新しい配列を作り直す

基本的にはmapの方が戻り値を持って帰ってくる為上位互換とも言えますが、
eachやforEachは戻り値を使わない宣言として使えます。
この辺を意識して使い分けるとぐっと読みやすくなるでしょう。

Math.maxは可変引数なのでそのままでは使えません。
しかし、apply をビルトイン関数と共に利用するを利用することで配列を使ってダイレクトに関数に適用できます。

投稿2018/01/16 05:56

編集2018/01/16 06:31
miyabi-sun

総合スコア21158

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

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

balls

2018/01/16 17:34

動きました。可読性も考慮いただき、またturbgraphics200さんの神業コードもわかりやすく解説してくださったことので、ベストアンサーとさせていただきます。
guest

0

総じてこういうことなのでしょうかね?

javascript

1$(function(){ 2 ['#hoge1 .topContMenu li a','#hoge2 nav ul li a','#hoge3 .block'].forEach(function(x){ 3 matchHeight($(x)); 4 }); 5 function matchHeight($element) { 6 var heighestHeight = 0; 7 $element.css({display:"block"}).each(function() { 8 var currentHeight = $(this).height(); 9 if (currentHeight > heighestHeight) { 10 heighestHeight = currentHeight; 11 } 12 13 }); 14 $element.height(heighestHeight); 15 } 16});

※inline要素は高さが設定できないのでblockにしてあります

HTML

1<div id="hoge1"> 2<ul class="topContMenu"> 3<li><a href="">hogehoge</a></li> 4<li><a href="">hogehogehogehoge<br>hogehoge</a></li> 5<li><a href="">hogehoge</a></li> 6<li><a href="">hogehoge</a></li> 7<li><a href="">hogehoge</a></li> 8<li><a href="">hogehoge</a></li> 9<li><a href="">hogehoge</a></li> 10</ul> 11</div> 12 13<div id="hoge2"> 14<nav> 15<ul> 16<li><a href="">about</a></li> 17<li><a href="">example</a></li> 18<li><a href="">information<br>hogehoge<br>hogehoge</a></li> 19<li><a href="">activity</a></li> 20<li><a href="">center</a></li> 21<li><a href="">document</a></li> 22<li><a href="">lecture</a></li> 23</ul> 24</nav> 25</div> 26 27<div id="hoge3"> 28<div class="block"> 29hoge3 30</div> 31<div class="block"> 32hoge3<br> 33hoge3<br>hoge3<br>hoge3<br>hoge3 34</div> 35</div>

投稿2018/01/16 06:34

yambejp

総合スコア114585

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

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

balls

2018/01/16 17:27

正常に動作しました。素晴らしいです。ありがとうございます。
guest

0

一応書いてみますが……結局三行じゃないか……

JavaScript

1 $.each([$topContentMenuHeight, $gnaviHeight, $blockHeight], function(index, value) { 2 matchHeight(value); 3 });

jQuery.each()
https://api.jquery.com/jQuery.each/

投稿2018/01/16 06:32

x_x

総合スコア13749

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

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

balls

2018/01/16 17:30

正常に動作しました。素晴らしいです。ありがとうございます。
guest

0

未検証ですがこういう感じですかね。

javascript

1var maxHeight = 0; 2$("#hoge1,#hoge2,#hoge3").each(function(){ 3 if ($(this).height() > maxHeight) { 4 maxHeight = $(this).height(); 5 } 6}); 7//設定 8$("#hoge1,#hoge2,#hoge3").height(maxHeight);

#追記
なんか違ってたみたいですすみませんm(_ _;)m
責任持って元コードでゴリ押し

javascript

1var maxHeight = 0; 2 3[$('#hoge1 .topContMenu li a'),$('#hoge2 nav ul li a'),$('#hoge3 .block')].forEach(function(val){ 4 maxHeight=0; 5 val.css('display','block').each(function(){ 6 if ($(this).height() > maxHeight) { 7 maxHeight = $(this).height(); 8 } 9 }); 10 val.height(maxHeight); 11}); 12

投稿2018/01/16 05:21

編集2018/01/16 07:08
sousuke

総合スコア3828

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

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

balls

2018/01/16 05:31

回答ありがとうございます。 いただいた方法ですと、#hoge1,#hoge2,#hoge3が全部同じ高さになってしまいます。 3つそれぞれ固有のmaxHeightがあるようにできないでしょうか? 私のやりたいこととしては、 matchHeight($topContentMenuHeight, $gnaviHeight, $blockHeight); こんな感じで実行できないものでしょうか?
yambejp

2018/01/16 05:35 編集

#hoge1が複数あるということですか?(idを振っているので普通はありえませんが) ちょっとhtmlのサンプルも付けてもらったほうがよいかと
balls

2018/01/16 06:05

HTMLを追加し、JSも少し編集しました。ご確認よろしくお願いいたします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問