0

I'm trying to iterate over a list of <ul>, so I have the code

  let frost = document.createElement("ul");
  let kiba = document.getElementsByTagName("li");
  console.log(kiba);

  for (todos of kiba) {
    console.log(todos.style.color);
    if (todos.style.color === `red`) { frost.appendChild(todos); } 
  }

  for (todos of kiba) {
    //console.log(todos);
    if (todos.style.color === `black`) {frost.appendChild(todos);} 
  }

  for (todos of kiba) {
    //console.log(todos);
    if (todos.style.color === `green`) {frost.appendChild(todos);} 
  }

  
let tasks = document.getElementById(`tasks`);
//for (i in todos) { tasks.appendChild(i); }
console.log(frost);

But it doesn't get to all the <li>, only some. and I have no idea why.

ggorlen
  • 44,755
  • 7
  • 76
  • 106
Dan Seminara
  • 23
  • 6
  • Sorry, why `for (todos of kiba) {` three times? Can't you use just the first one? :) – Roko C. Buljan Aug 21 '21 at 17:17
  • Because I want to sort by the color, red, black, and then green in the new ul I'm making. – Dan Seminara Aug 21 '21 at 17:17
  • What do you think it would happen in you put all the `if` statements inside the first loop? Also, if all you do is always `frost.appendChild(todos);` perhaps there's a better way than three distinct IF statements ;) – Roko C. Buljan Aug 21 '21 at 17:18
  • If you want to sort them, you should ask about how to use `Array.sort()`. :) – Rickard Elimää Aug 21 '21 at 17:19
  • 3
    Duplicate of [Strange behavior when iterating over HTMLCollection from getElementsByClassName](/q/15562484/4642212). `kiba` is a _live_ list of elements. Once you append elements elsewhere, they’re removed from their original location, and as a result _also_ removed from the list. Effectively, you’re mutating the list as you’re iterating it. Iterate over `Array.from(kiba)` to make it static. – Sebastian Simon Aug 21 '21 at 17:20
  • If I put them in the first loop, it'll just put them all in the same order they were in in the first place, – Dan Seminara Aug 21 '21 at 17:20
  • 2
    Checking CSS properties directly is [best avoided](/q/55071684/4642212), especially for color values. Instead, a CSS class should be used, e.g. `.red { color: red; } .black { color: black; } .green { color: green; }`; then use [`.classList.contains("red")`](//developer.mozilla.org/docs/Web/API/Element/classList) to check for its existence. – Sebastian Simon Aug 21 '21 at 17:23
  • 1
    If you use CSS classes, the code for sorting and appending may look like this: `const classNames = [ "red", "black", "green" ]; frost.append(...Array.from(kiba).sort((a, b) => classNames.findIndex((className) => a.classList.contains(className)) - classNames.findIndex((className) => b.classList.contains(className))));`. – Sebastian Simon Aug 21 '21 at 17:30
  • 1
    Thank you, Sebastian Simon! On your advice, I added classes of the same names as the colors, and I managed to code the thing in about 5 minutes (just make an array for each of the 3 colors and concatenate them in the right order after!) – Dan Seminara Aug 21 '21 at 17:56

0 Answers0