とほほのjQuery入門

• トップ
• jQuery
• Miscellaneous

• Miscellaneous(Collection Manipulation)
  • obj.each()
• Miscellaneous(DOM Element Methods)
  • obj.size()
  • obj.get()
  • obj.toArray()
  • obj.index()
• Miscellaneous(Data)
  • obj.data()
  • obj.removeData()
  • $.removeData()
  • $.hasData()

Miscellaneous(Collection Manipulation)

obj.each(function(index, element)) (1.0)

obj の各要素に対して関数を実行します。

$("div").each(function() {
    alert($(this).html());
});

<div id="d1">D1</div>
<div id="d2">D2</div>
<div id="d3">D3</div>
<div id="d4">D4</div>
<div id="d5">D5</div>

Miscellaneous(DOM Element Methods)

obj.size() (1.0/廃止:1.8)

obj の個数を返します。jQuery 1.8 で非推奨となり、jQuery 3.0 で削除されました。代わりに .length を使用してください。

var num = $("h1").size();

obj.get([index]) (1.0)

jQuery配列を JavaScript配列に変換します。index を指定すると、0から数えて index番目の要素のみを JavaScript要素に変換します。省略した場合はすべての要素を配列で返します。下記の例では、$("div.data") で取得した jQuery配列を get() で JavaScript配列に変換し、JavaScriptの機能で sort() しています。

divs = $("div.data").get().sort();
for (var i = 0; i < divs.length; i++) {
    $("#log").append(divs[i].innerHTML);
}

obj.toArray() (1.4)

get() と同様、jQuery配列を JavaScript配列に変換します。

divs = $("div.data").toArray().sort();
for (var i = 0; i < divs.length; i++) {
    $("#log").append(divs[i].innerHTML);
}

obj.index() (1.4)
      obj.index(selector) (1.4)
      obj.index(element) (1.0)

index() の形式は、兄弟要素における該当要素のインデックスを返します。

$("tr").each(function() {
    $("#log").append("n=" + $(this).index() + "<br>");    // n=0  n=1  n=2...
});

index(selector) の形式は、selector で示される要素集合における obj のインデックスを返します。要素集合内に存在しない場合は -1 を返します。

$("tr").each(function() {
    $("#log").append("n=" + $(this).index("tr.data") + "<br>");
});

index(element) の形式は、obj 集合における element のインデックスを返します。集合内に存在しない場合は -1 を返します。

$("tr").each(function() {
    $("#log").append("n=" + $("tr").index(this) + "<br>");
});

Miscellaneous(Data)

obj.data(key, value) (1.2.3)
      obj.data(keyValues) (1.4.3)
      obj.data(key) (1.2.3)
      obj.data() (1.4)

obj に key=value のデータを設定・参照します。

$("#total").data("totalFee", "128000");
var totalFee = $("#total").data("totalFee");    // "128000"

下記の様な指定も可能です。

$("#data").data({ name: "Mike", age: 36 });
var name = $("#data").data("name");              // "Mike"

引数を省略するとすべての値を取得します。

$("#data").data({ name: "Mike", age: 36 });
var name = $("#data").data();                    // { name: "Mike", age: 36 }

obj.removeData([name]) (1.2.3)
      obj.removeData(list) (1.7)

$.removeData(element[, name]) (1.2.3)

obj や element から data() で設定した値を削除します。引数を省略するとすべてのデータを削除します。

$("#total").data("totalFee", "128000");
$("#total").removeData("totalFee");

$("#data").data({ name: "Mike", age: 36 });
$("#total").removeData("name", "age");

$("#total").removeData();

$.removeData($("#total").get()[0], "name");

$.hasData(element) (1.5)

指定した JavaScript要素がデータを持っているか否かを true / false で返します。

$(document.body).data("currentFocus", "text1");
$("#log").append("data = " + $(document.body).data("currentFocus") + "\n");
$("#log").append("hasData = " + $.hasData(document.body) + "\n");

---