（jQueryの学習）CSS：幅を操作する／widthメソッド／要素の幅を取得する（その３）

前回の続きで、
「複数要素」の幅を取得する方法を考えます。

1-3.widthメソッドとmapメソッドで複数要素の幅を取得する

複数の要素の幅は取得できなかったが、
調べてみると「mapメソッド【返却値（jQueryオブジェクト）＝要素．map(function)】」を利用することで、
複数要素の幅をまとめて取得できることがわかった。

mapメソッドには複数の使い方があり、
今回は「引数に設定したfunctionによって指定した要素が持つ情報を取り出す」ために利用します。

引数に設定するFunctionの構文

function 任意のfunction名(インデックス番号, セレクタの要素) {
  // ↓インデックスやセレクタの要素等の引数が利用できる
  ・・・任意の処理・・・;
  // ↓取り出した情報をjQueryオブジェクトで返却する
  return jQueryオブジェクト;
}

実際に動かしてみると、以下のようになります。

サンプルソース

// HTML
<input type="button" value="ボタンを押すと、指定した要素の幅が表示されます"><br>
<div class="box">
  <div class="box"><b>テストエリア１</b><div class="box-css-test-area-1">・・・略・・・</div></div>
  <div class="box"><b>テストエリア２</b><div class="box-css-test-area-2">・・・略・・・</div></div>
</div>

// CSS
/* テストエリア１ */
.box-css-test-area-1 {background:#F5EEFF; border:5px solid #88f; padding:10px; margin:20px; height:40px; width:460px;}
/* テストエリア２ */
.box-css-test-area-2 {background:#F5EEFF; border:5px solid #88f; padding:20px; margin:10px; height:30px; width:450px;}

// jQuery
$(function() {
  $("input[type=button]").click(function(){
    //   サンプル：「テストエリア１と２」の幅を取得する
    alert("[" + $(".box-css-test-area-1, .box-css-test-area-2").map(getWidth).get() + "]");
    // ↑：getWidthで各要素の幅を取得し、その結果をオブジェクトに格納する
  });
});

// JavaScript
function getWidth(index, el){
  // 【構文】返却値(数値) = 要素.width()
  return $(el).width();
}

実装例

指定した要素に設定されている幅を取得します。

要素:テストエリア１とテストエリア２

テストエリア１

border:5px; padding:10px; margin:20px; height:40px; width:460px;
（境界線:5px、枠内余白:10px、枠外余白:20px、高さ:40px、幅:460px）

テストエリア２

border:5px; padding:20px; margin:10px; height:30px; width:450px;
（境界線:5px、枠内余白:20px、枠外余白:10px、高さ:30px、幅:450px）

mapメソッドを利用することで
複数の要素の幅がまとめて取得できることがわかりました。

次回は要素の幅を設定する方法を学びます。

それでは、また。

• Tweet
• Share
• Share
• Share
• Share