How to search for a tag with a class inside of a tag

Question

I have something like this:

<g>
  <rect x="98" y="77" width="141" height="119" class=" with_href selected"></rect>
  <rect class="helper move" height="5" width="5" x="165.5" y="133.5"></rect>
  <rect class="helper n-resize" height="5" width="5" x="165.5" y="74"></rect>
  <rect class="helper s-resize" height="5" width="5" x="165.5" y="193"></rect>
</g>
<g>
  <rect x="390" y="130" width="76" height="70" class=""></rect>
  <rect class="helper move" height="5" width="5" x="425" y="162"></rect>
  <rect class="helper move" height="5" width="5" x="425" y="162"></rect>
</g>

I am trying to search inside each set of < g > tags to make sure there is one rect tag with the class " with_href selected" if there is not, when the save button is clicked, I will alert the user with a message saying all inputs need to be completed, otherwise, if each set of < g > has the class, it will just save and display the information.

Answer 1

To select only the <g> tags that contain a rect with classes "with_href" and "selected", you can do the following:

document.querySelectorAll('g > rect.with_href.selected')

That would return an array.

You could compare that array to the array returned by this:

document.querySelectorAll('g')

And if the length of the first array is less than the length of the second, you can alert the user, since not all of the g tags contain the rect with the two classes.