.map()

http://api.jquery.com/map/

マッチした要素それぞれに指定した関数を実行し、実行結果をまとめた新しいjQueryオブジェクトを生成して返します。

.map( callback(index, domElement) ) 1.2追加
補足事項
デモ

.map( callback(index, domElement) ) 1.2追加

戻り値:jQuery

検証する要素をセレクタで指定します。

引数	説明
callback(index, domElement)	マッチしている各要素に対して実行したい関数を指定します。 index インデックス番号 domElement 関数の実行対象となる要素

補足事項

戻り値はjQueryにラップされた配列になります。.get()を実行すると普通の配列を取得することが出来ます。

このメソッドはマッチした要素のセットに対し、それぞれの要素に値をセット、またはそれぞれの要素から値を取得したい場合に非常に有用です。例えば、次のようなチェックボックスが複数あるコードがあった場合、

<form method="post" action="">
  <fieldset>
    <div>
      <label for="two">2</label>
      <input type="checkbox" value="2" id="two" name="number[]">
    </div>
    <div>
      <label for="four">4</label>
      <input type="checkbox" value="4" id="four" name="number[]">
    </div>
    <div>
      <label for="six">6</label>
      <input type="checkbox" value="6" id="six" name="number[]">
    </div>
    <div>
      <label for="eight">8</label>
      <input type="checkbox" value="8" id="eight" name="number[]">
    </div>
  </fieldset>
</form>

各チェックボックスのID値をカンマ区切りの文字列として取得したい場合、下記の処理を実行するすことで、実現することが出来ます。処理の結果、"two,four,six,eight"の文字列を取得します。

$(':checkbox').map(function() {
  return this.id;
}).get().join(',');

デモ

フォーム内の入力値を全て取得し、カンマ区切りで結合した文字列にして出力します。

<!DOCTYPE html>
<html>
<head>
  <style>
  p { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p><b>入力値: </b></p>
<form>
  <input type="text" name="name" value="太郎"/>
  <input type="text" name="password" value="パスワード"/>
  <input type="text" name="url" value="http://yahoo.co.jp/"/>
</form>
<script>
  $("p").append( $("input").map(function(){
    return $(this).val();
  }).get().join(", ") );
</script>
</body>
</html>

元の青いリストを元に.map()を用いて赤いリストを生成しています。

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-size:16px; }
  ul { float:left; margin:0 30px; color:blue; }
  #results { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
  <li>Fourth</li>
  <li>Fifth</li>
</ul>
<ul id="results">
</ul>
<script>
  var mappedItems = $("li").map(function (index) {
    var replacement = $("<li>").text($(this).text()).get(0);
    if (index == 0) {
        /* 1番目の要素は大文字に変換します。 */
        $(replacement).text($(replacement).text().toUpperCase());
      } else if (index == 1 || index == 3) {
        /* 2番目と4番目の要素は削除します。 */
        replacement = null;
      } else if (index == 2) {
        /* 要素を作り、新しい要素とテキストを追加しています。 */
        replacement = [replacement, $("<li>").get(0)];
        $(replacement[0]).append("<b> - A</b>");
        $(replacement[1]).append("Extra <b> - B</b>");
      }
      /* 各要素をDOM要素、NULL、DOM要素の配列のいずれかにして返します */
      return replacement;
  });
  $("#results").append(mappedItems);
</script>
</body>
</html>

ボタンをクリックすると、DIV要素の高さを揃えます。

<!DOCTYPE html>
<html>
<head>
<style>
  div { width: 40px; float:left; }
  input { clear:left}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input type="button" value="DIVの高さを揃える">
<div style="background:red; height: 40px; "></div>
<div style="background:green; height: 70px;"></div>
<div style="background:blue; height: 50px; "></div>
<script>
  $.fn.equalizeHeights = function() {
    var maxHeight = this.map(function(i,e) {
      return $(e).height();
    }).get();
    return this.height( Math.max.apply(this, maxHeight) );
  };
  $('input').click(function(){
    $('div').equalizeHeights();
  });
</script>
</body>
</html>