[javascript]for文で配列の後ろから指定したい。

Question

javascriptで
for文を回してその中で配列を用意し、
画面がクリックされたタイミングで設定した数値分文字が赤から黒になるようにしたいんですが
やり方がわからないので教えてください。

html

<ul>
  <li data-li="">test1</li>
  <li data-li="">test2</li>
  <li data-li="">test3</li>
  <li data-li="">test4</li>
  <li data-li="">test5</li>
  <li data-li="">test6</li>
  <li data-li="">test7</li>
  <li data-li="">test8</li>
  <li data-li="">test9</li>
  <li data-li="">test10</li>
  <li data-li="">test11</li>
</ul>

js

const list = document.querySelectorAll('[data-li]');

for (let i = 0; i < list.length; i += 1) {
  list[i].classList.add('style-list');
}

window.addEventListener('click', () => {
  for (let i = 0; i < 3; i += 1) {
    list[i].classList.remove('style-list');
  }
});

css

.style-list {
  color: #ff0000;
}

このコードでやると
test1,test2,test3が黒文字になるのですが、
test11,test10,test9が黒文字になるようにしたいです。

教えてください。

Comments

[kei344]

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

[m.ts10806]

もしかしてコピペコード丸投げだったということ・・？

[defghi1977]

ああ，コードの展開ボタン見落とした

[kei344]

過去の質問について、「解決済」になっていないものが多数見受けられます。解決したものは「ベストアンサー」を選び、自力で解決した場合はその方法を解答欄に書き、もし万が一解決していないのであれば質問を編集するなどしてみてください。

Answer 1

単純にlengthをもっているのですから、最後のノードのキーは
length-1になります
これをデクリメントしながら3回回せばいいわけです

<script>
window.addEventListener('DOMContentLoaded', function(e){
  var list=document.querySelectorAll('[data-li]');
  var num=3;
  for(var i=list.length-1;i>list.length-1-num;i--){
    console.log(list[i].textContent);
  }
});
</script>
<ul>
  <li data-li="">test1</li>
  <li data-li="">test2</li>
  <li data-li="">test3</li>
  <li data-li="">test4</li>
  <li data-li="">test5</li>
  <li data-li="">test6</li>
  <li data-li="">test7</li>
  <li data-li="">test8</li>
  <li data-li="">test9</li>
  <li data-li="">test10</li>
  <li data-li="">test11</li>
</ul>

Answer 2

最大数から引いていって任意の位置（今回は3番目）でブレイクするようにすればいいですね。

window.addEventListener('click', () => {
  for (let i = list.length; i > (list.length-3); i--) {
    list[(i-1)].classList.remove('style-list');
  }
}); 

Answer 3

:nth-child/:nth-lact-child擬似クラスセレクタを使ったノード抽出も使い方によっては便利です.

const list = document.querySelectorAll('[data-li]');
for (let i = 0; i < list.length; i += 1) {
  list[i].classList.add('style-list');
}
window.addEventListener('click', () => {
  const list =  document.querySelectorAll(':nth-last-child(-n+3)[data-li]');
  for (let i = 0; i < list.length; i += 1) {
    list[i].classList.remove('style-list');
  }
});

これでも動きますが, 既に検索済みのリストを使ったほうが効率が良いので, 今回の質問においてはベストな解決策ではありません.

---

NOTE:
質問本文のコードの後半を見落としていました. 従って, 当初の回答はこの記事の回答としては不適です.

なんかコードと説明の内容に齟齬があるような.

const list = document.querySelectorAll(':nth-child(-n+8)[data-li]');

for (let i = 0; i < list.length; i += 1) {
  list[i].classList.add('style-list');
}