'From list of elements set opacity to 0 if its a certain tag

I have a list of elements from a querySelectorAll call and i want to set all the elements that are <g> tags to have opacity 0. Im unsure how an if statement like this would work though.

  useEffect(() => {
    var elements = document.querySelectorAll(`[id^='tooth-${props.toothnumber}']`);
    var svg = document.querySelector('svg')
    console.log(svg)
    var elms = svg.querySelectorAll(`:not([id^='tooth-${props.toothnumber}'])`)
    for(var i = 0; i < elms.length; i++) {
        if (elems[i] is a g tag) {
            elms[i].style.opacity = 0
        }
        
    }
  }, [props.toothnumber])

Any Advice

javascripthtmlreactjs


Solution 1:[1]

let gList = document.querySelectorAll('g');
for(var i = 0; i < gList.length; i++) {
  gList[i].style.opacity = 0;
}

Solution 2:[2]

Can't you just add g to the query selector?

useEffect(() => {
  var svg = document.querySelector('svg')
  var elms = svg.querySelectorAll(`g:not([id^='tooth-${props.toothnumber}'])`)
  elms.forEach((element) => element.style.opacity = 0)
}, [props.toothnumber])

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ryan O'D
Solution 2 Zach Jensz

Related Questions