脱jQuery .eq() .not() .slice() .children() .parent() .next() .prev()

.eq()

jQuery

$(".menu").eq(2).text("書き換え");

書き換え JavaScript

document.getElementsByClassName("menu")[2].textContent = "書き換え";

何度か出てきていますが .eq() は　[] で書き換えが可能です。.text() のネイティブ書き換えについては下記の記事を参照ください。

参考：.text()の書き換え

ただし、eq(-2) のように ネイティブでは [-2] とマイナスは指定不可ですのでその場合は以下のようにします。

jQuery（マイナスの場合）

$(".menu").eq(-2).text("書き換え");

書き換え JavaScript（マイナスの場合）

var myMenu = document.getElementsByClassName("menu");
myMenu[myMenu.length - 2].textContent = "書き換え";

[myMenu.length - 2] で逆順を表せます。myMenu.length は myMenu の数、つまり .menu の要素数を表すのでそれを利用して後ろからの逆順にします。

.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 = "書き換え";
    }
}

class で取った際は基本 for で総当りします。

参考：for について

if(!myMenu[i].classList.contains("second")) の部分がポイントになります。if は「もし」、myMenu[i].classList.contains("second") は 「.menu の i 番目のクラス名に second が含まれる」、! は「ではない」の否定の意味です。

まとめると「もし、.menu の i 番目のクラス名に second が含まれない時」です。クラス名が second の時は中に入れないので「書き換え」の命令が起こりません。

基本 for の中身に if を入れて抜粋します。

.slice()

jQuery

$(".menu").slice(3,7).text("書き換え");

書き換え JavaScript

var myMenu = document.getElementsByClassName("menu");
for (var i = 3; i < 7; i++) {
    myMenu[i].textContent = "書き換え";
}

.slice() は途中を抜粋する命令です。for の初期条件と更新条件を変更します。.slice(3,7)は「4～6」番目の3つを抜粋するので、for(var i = 3; i < 7; i++) とすればOKです。

.slice() は中身の数字が1種類だけの時もあります。例えば.slice(3) であれば「4番目から最後まで」となるのでその場合の書き換えも紹介しておきます。

jQuery（数字が1つ）

$(".menu").slice(3).text("書き換え");

書き換え JavaScript（数字が1つ）

var myMenu = document.getElementsByClassName("menu");
for (var i = 3; i < myMenu.length; i++) {
    myMenu[i].textContent = "書き換え";
}

最後までして欲しいので更新式を myMenu.length にすればOKです。

.children()

jQuery

$("#menu").children().text("書き換え");

書き換え JavaScript

var myMenuChild = document.getElementById("menu").children;
for (var i = 0; i < myMenuChild.length; i++) {
    myMenuChild[i].textContent = "書き換え";
}

.children() は　.children と書き換えが可能です。JavaScript の方はカッコがないことに注意してください。JavaScript には .childNodes と似た命令もあるのですが jQuery の.children() 書き換えは .children を使えばOKです。

.children(".odd") などのようにカッコの中に条件がある場合は if を使い抜粋します。

jQuery（カッコ内に条件）

$("#menu").children(".odd").text("書き換え");

書き換え JavaScript（カッコ内に条件）

var myMenuChild = document.getElementById("menu").children;
for (var i = 0; i < myMenuChild.length; i++) {
    if(myMenuChild[i].classList.contains("odd")){
        myMenuChild[i].textContent = "書き換え";
    }
}

if(myMenuChild[i].classList.contains("odd")) でクラス名が odd の場合のみ for の中身を実行します。

.parent()

jQuery

$("#menu").parent().text("書き換え");

書き換え JavaScript

document.getElementById("menu").parentNode.textContent = "書き換え";

.parent() は .parentNode で書き換え可能です。 親要素は1つしか無いのが普通なので for で総当りする必要がなくそのまま命令が実行可能です。

.next()

jQuery

$("#menu").next().text("書き換え");

書き換え JavaScript

document.getElementById("menu").nextElementSibling.textContent = "書き換え";

兄弟要素を指定する命令です。.next() は直後の兄弟を指定します。一つだけ指定しますので for での総当りは必要ありません。

JavaScript には似た命令で .nextSibling という間の Element が抜けている命令がありますが、jQuery の .next() の書き換えは .nextElementSibling を使えばOKです。似てるので注意しましょう。

.prev()

jQuery

$("#menu").prev().text("書き換え");

書き換え JavaScript

document.getElementById("menu").previousElementSibling.textContent = "書き換え";

直前の兄弟要素を指定する命令です。.next() と考え方は同じで、.previousElementSibling を用います。 .previousSibling と似た命令もありますが同様に .prev() の場合は .previousElementSibling でOKです。

まとめ