如何获取条件为真的元素的所有ids？

Question

我正在尝试用js做一个切换函数来隐藏所有的注释和它的子类。这是一个html格式的评论：

 <div>
    <a onclick="return toggle(4 /*id*/, 7 /*lft*/, 10 /*rgt*/)" href="javascript:void(0)">[-]</a>
    <div id="com4" class="md" value="7-10">yellow</div>
 </div>

这个评论有一个子级value="8-9"，我想用id="com4“和它的子级来隐藏评论。-->这是如何找到评论value="8-9”⬆的id的问题。

这是我的js：

function toggle(id, lft, rgt) {
    var kids = (rgt - lft - 1) / 2;
    if (kids >= 1) {
        var element = document.querySelectorAll("div.md").getAttribute('value');
        var low = Number(element.split('-')[0]);
        var high = Number(element.split('-')[1]);
        if (low > lft && high < rgt) {
            var x = //get the ids of these elements where: low>lft && high<rgt 
                if (x.style.display === "none") {
                    x.style.display = "block";
                } else {
                    x.style.display = "none";
                }
        }
    } else {
        var x = document.getElementById("com" + id);
        if (x.style.display === "none") {
            x.style.display = "block";
        } else {
            x.style.display = "none";
        }
    }
    return false;
}

我正在尝试查找孩子⬆的所有ids：

if (low > lft && high < rgt) {
                var x = //get the ids of these elements where: low>lft && high<rgt 

这是一张了解我的评论系统如何工作的图片：nested sets

提前感谢，我为我糟糕的英语感到抱歉;)

Answer 1

请看下面的代码：

​

 function toggle(id, lft, rgt) {
    var kids = (rgt - lft - 1) / 2;
    if (kids >= 1) {
        var element = document.querySelectorAll("div.md#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.md#com" + i)[0]
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
        }
    }
}

<div>
    <div id="com4" class="md" value="7-10">yellow 
        <a onclick="toggle(4, 7, 10)" href="javascript:void(0)">[-]</a>
    </div>
    
    <div id="com5" class="md">Should not collapse</div>
    <div id="com8" class="md">Should collapse</div>
    <div id="com9" class="md">Should collapse</div>
    <div id="com11" class="md">Should not collapse</div>
 </div>

​