如何正确使用document.querySelectorAll（）？

Question

I asked before here and on reddit about how to make the comments collapse with the children and I want to say thank u to everyone who helped me, but I know nothing with js I'm much comfortable with server side programming, they told me to do a lot of things that I don't understand and I couldn't make it work, and I know this problem have a simple solution and I think I found a logic to make it work without all the Complexity.

this is my html comment code:

<div>
   <a onclick="return toggle(1, 7, 10)" href="javascript:void(0)">[-]</a>
   <div id="com1" class="com md" value="7-10" min="7">Yiiiihhaaa</div>
</div>

I want to hide this comment:

<div>
   <a onclick="return toggle(2, 8, 9)" href="javascript:void(0)">[-]</a>
   <div id="com2" class="com md" value="8-9" min="8">Yiiiihhaaa</div>
</div>

this is my js function:

function toggle(id, lft, rgt) {
    var kids = (rgt - lft - 1) / 2;
    if (kids >= 1) {
        var element = document.querySelectorAll("div.com#com" + id)[0].getAttribute('value');
        var low = Number(element.split('-')[0]);
        var high = Number(element.split('-')[1]);
        for(var i = low + 1; i <= high - 1; i += 1){
            var x = document.querySelectorAll('div.com[min=i]')[0]//this is the problem
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
        }
    }

this is the problem:

for(var i = low + 1; i <= high - 1; i += 1){
                var x = document.querySelectorAll('div.com[min=i]')[0]//this is the problem

I want to search the document for elements with the class="com" which have an attribute min=x, where x is between the value of the parent comment.

for example: the parent comment have a value="7-10". I want to hide all the comments where the min =x and 7 < x > 10

Answer 1

That's because min attribute won't be equal to "i"...
You have to insert the variable i 's value in the place of "i".

So, you should do something like this:

document.querySelectorAll('div.com[min='+i+']')[0]