脱jQuery :lt() :gt() :even :odd :first :last :not :input :text :checkbox

jQuery だけに使える特殊なセレクタ達をネイティブに変換します。

詳しくは 脱jQuery その1 を参照にしてください。

「jQuery 高速化」などで検索すると「jQuery の特殊なセレクタは使うな」等と出てきます。これは jQuery でしか使えないため特殊なエンジン(Sizzle エンジン)が動きそのせいで遅くなります。jQuery を使うにしてもなるべく使わないで、回避できるものは回避したほうがコード的には高速に動きます。

without-jquery

:lt()

jQuery

$(".menu:lt(4)").text("変換しました");

書き換え JavaScript

var myMenu = document.getElementsByClassName("menu");
for (var i = 0; i < 4; i++) { myMenu[i].textContent = "変換しました"; }

:lt(n) は「インデックスが n 番目未満の要素」、つまり :lt(4) は0~3番目を指します。4は入らないので注意しましょう。for (var i = 0; i < 4; i++) と for で0から4未満を選択すればOKです。.slice() の時の処理と似ています。

参考:.text() の書き換え
参考:.slice() の書き換え

スポンサーリンク

:gt()

jQuery

$(".menu:gt(5)").text("変換しました");

書き換え JavaScript

var myMenu = document.getElementsByClassName("menu");
for (var i = 6; i < myMenu.length; i++) {
    myMenu[i].textContent = "変換しました";
}

:gt(n) は「インデックスが n より大きい(n+1 以上)の要素」、つまり :gt(5) は6以降を指します。これも同様に5は入りません。for (var i = 6; i < myMenu.length; i++) と i = 5 ではなく1つ大きい i = 6 とするのがポイントです。

:even

jQuery

$(".menu:even").text("変換しました");

書き換え JavaScript

var myMenu = document.getElementsByClassName("menu");
for (var i = 0; i < myMenu.length; i = i + 2) {
    myMenu[i].textContent = "変換しました";
}

:even は偶数のインデックスのみ抜き出すセレクタです。i++ は1つづつ増やす命令ですが、i = i + 2 とすることにより2づつ増やすことが出来ます。0スタートなので「0,2,4,6・・・」と偶数を持ってこれます。

インデックスが偶数を選ぶので順番が偶数番目ではないことに注意しましょう。0スタートです。順番的には奇数番目を選びます。

:odd

jQuery

$(".menu:odd").text("変換しました");

書き換え JavaScript

var myMenu = document.getElementsByClassName("menu");
for (var i = 1; i < myMenu.length; i = i + 2) {
    myMenu[i].textContent = "変換しました";
}

:odd は奇数のインデックスのみです。:even と同様に i = i + 2 とし、スタートを0ではなく1にします。1スタートにすることで「1,3,5,7・・・」と奇数を持ってこれます。

インデックスが奇数なので :even の考え方と同様に偶数番目を持ってきます。

:first

jQuery

$(".menu:first").text("変換しました");

書き換え JavaScript

document.getElementsByClassName("menu")[0].textContent = "変換しました";

:first は最初のものつまり0番目ですので[0]でOKです。

:last

jQuery

$(".menu:last").text("変換しました");

書き換え JavaScript

var myMenu = document.getElementsByClassName("menu");
myMenu[myMenu.lenght - 1].textContent = "変換しました";

:last は最後の要素を持ってきます。最後を示すには [myMenu.lenght - 1] を使います。myMenu.length が個数を表し最後のインデックス値は「個数 - 1」になるのでそれを利用します。

:not

jQuery

$(".menu:not(.second)").text("変換しました");

書き換え JavaScript

var myMenu = document.getElementsByClassName("menu");
for (var i = 0; i < mymenu.length; i++) {
    if(!myMenu[i].classList.contains("second")) {
        myMenu[i].textContent = "変換しました";
    }
}

.not() の書き換えと全く同じです。以下を参考にしてください。

参考:.not() の書き換え

:input

jQuery

$(".menu:input")

書き換え JavaScript

document.querySelectorAll("input.menu, select.menu, textarea.menu, button.menu")

:input は input タグはもちろん、select タグ、textarea タグ、button タグが含まれます。

class に .menu が含まれる上記のタグを持ってくれば良いので querySelectorAll を使います。CSSのようにセレクタを選べるのでこの形でOKとなります。他にもやり方はあるのですがおそらく一番簡単なやり方はこれだと思われます。

:text

jQuery

$(".menu:text")

書き換え JavaScript

document.querySelectorAll(".menu[type='text']")

:text は input type="text" を持ってくれば良いので属性セレクタを使います。これも querySelectorAll でやれば簡単に出来ます。速度的には別の方法のほうがいいものも考えられるのですが、処理が煩雑になるのでこれを採用します。

:checkbox

jQuery

$(".menu:checkbox")

書き換え JavaScript

document.querySelectorAll(".menu[type='checkbox']")

:text と考え方は同じです。jQuery にはこれらの他にもフォームのセレクタがたくさんありますが全てこのやり方で書き換えが可能です。すべて載せるのは大変だったので抜粋しましたが、querySelectorAll を使うことで変換可能です。

まとめの A 、B 、C などの文字は厳密なものではないので「こんな感じ」程度に捉えてください。

まとめ

jQueryJavaScript
$("A:lt(B)").text("C")for (var i = 0; i < B; i++) {
  A[i].textContent = "C";
}
$("A:gt(B)").text("C")for (var i = B + 1; i < A.length; i++) {
  A[i].textContent = "C";
}
$("A:even").text("C")for (var i = 0; i < A.length; i = i + 2) {
  A[i].textContent = "C";
}
$("A:odd").text("C")for (var i = 1; i < A.length; i = i + 2) {
  A[i].textContent = "C";
}
$("A:first")A[0]
$("A:last")A[A.length - 1]
$("A:not(".B")).text("C")for (var i = 0; i < A.length; i++) {
  if(!A[i].classList.contains("B")) {
    A[i].textContent = "C";
  }
}
$(".A:input")document.querySelectorAll("input.A, select.A, textarea.A, button.A")
$("A:text")document.querySelectorAll("A[type='text']")
$("A:checkbox")document.querySelectorAll("A[type='checkbox']")
Top