js STUDIO

.get()

.get( [index] ) 1.0追加

戻り値:Element, Array

引数 説明
[index] 0始まりの取得したいDOM要素のインデックス番号を指定します。

サンプル

下記のようなリストがページ上にあった場合、

<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
</ul>

次の処理のように引数なしで実行すると、マッチした全ての要素が対象となります。

alert($('li').get());
/*
[<li id="foo"></li>, <li id="bar"></li>] のような要素配列を取得します。
*/

次の処理のように引数にインデックス番号を指定すると、要素を1つだけ取得します。

alert($('li').get(0));
/*
<li id="foo"></li> 1つ目の要素を取得します。
*/

また、jQueryオブジェクトは配列のように振る舞うので、getの代わりに次のようにして要素を取得することも可能です。

alert($('li')[0]); //1つ目の要素を取得します。

ただし、マイナス値を指定するなどの.get()でしか出来ない機能もあります。

alert($('li').get(-1));
/*
<li id="bar"></li> 最後の要素を取得します。
*/

デモ

Document内の全てのDIV要素からDOM要素の配列を取得し、順番を反対にしてテキストを出力しています。

<!DOCTYPE html>
<html>
<head>
<style>
  span { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div>【1】</div>
<div>【2】</div>
<div>【3】</div>
順番を反対にして出力 : <span></span>
<script>
  function disp(divs) {
    var a = [];
    for (var i = 0; i < divs.length; i++) {
      a.push(divs[i].innerHTML);
    }
    $("span").text(a.join(" "));
  }
  disp( $("div").get().reverse() );
</script>
</body>
</html>

クリックした要素のタグ名を取得して、出力しています。

<!DOCTYPE html>
<html>
<head>
<style>
  span { color:red; }
  div { background:yellow; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<span>&nbsp;</span>
<p>この段落内には、<span>重要な</span>セクションがあります。</p>
<div><input type="text" /></div>
<script>
$("*", document.body).click(function (e) {
  e.stopPropagation();
  var domEl = $(this).get(0);
  $("span:first").text("クリックした要素 - " + domEl.tagName);
});
</script>
</body>
</html>

 Back to top

© 2010 - 2017 STUDIO KINGDOM