javascript - 从显示为 :none in JavaScript 的父 div 获取 ID

Question

我想获取特定元素的父元素的 ID。父元素使用 display:none 隐藏，因为我需要它不获取空间。

我编写了一个 Javascript，它根据父类从元素的父类获取 id。

function getParentDivId(divName, classNameParent) {
    do {
        divName = divName.parentNode; // get parentdiv from initial div
        if (divName.className == classNameParent) { // check if parent div belongs to specified class
            return divName.id; // return the id of the parent div
        }
    } while (divName.parentNode) { // while div has parent do above function
        return null;
    }
}

这是HTML代码

<div class="row" id="row1">
    <!-- code for a single main category with several subcategories -->
    <!-- all subcategories can be hidden by setting the subcategories display property to none-->
    <!-- all subcategories can be shown by setting the categories display property to inline-block-->
    <div class="categories" id="calgemeen">
        <div class="item" id="algemeen">algemeen
            <div class="press" onclick="goSubcategory(this, contact);"></div>
        </div>
    </div>
    <div class="subcategories" id="scalgemeen">
        <!--subcategories can be shown using item, note the weird -->
        <!--syntax ><div this is necessary to remove the whitespace between inline-blocks-->
        <div class="subcategory" id="info"><div class="item">info</div></div
        ><div class="subcategory" id="contact"><div class="item">contact
            <div class="press" onclick="goSubcategory(this, spaans);"></div></div></div
        ><div class="subcategory" id="route"><div class="item">route</div></div>
    </div>
</div>
<div class="row" id="row2">
    <div class="categories" id="chuisartsen">
        <div class="item">huisartsen
        </div>
    </div>
    <div class="subcategories" id="schuisartsen">
        <div class="subcategory" id="spaans"><div class="item">spaans</div></div
                ><div class="subcategory" id="engels"><div class="item">stelten</div></div
            ><div class="subcategory" id="frans"><div class="item">willemsen</div></div>
    </div>
</div>

有关返回 ID 的信息:

<script type="text/javascript">
    function goSubcategory(current, subcategory) {
        var sc_current = getParentDivId(current, "subcategories");
        var sc_target = getParentDivId(subcategory, "subcategories");
        console.log("current: " + sc_current);
        console.log("target: " + sc_target);
    }
</script>

这在 onclick="goSubcategory(this, contact) 时返回到控制台

current: null
target: scalgemeen

这是正确的，因为“this”在子类别类中没有父级，并且'contact' 在子类别类中确实有一个父类，id='scalgemeen'

但是，onclick="goSubcategory(this, spaans) 在控制台中返回

current: scalgemeen
target: scalgemeen

这是不正确的，因为 'spaans' 应该有一个 id='schuisartsen' 的父级

请注意，当 onclick="goSubcategory(this, spaans) 被选中时，所有具有类类别的元素都会显示:无以及元素 row2。

是否有一种方法可以让我获得正确的目标 ID。

Answer 1

我认为这是你的问题。一个 do...while 循环应该是这样的:

do {
//do something
}
while(conditon==true);

下面也是这样。如果您在其他地方没有任何错误，它可能对您有用。

function getParentDivId(divName, classNameParent) {
    do {
        divName = divName.parentNode; // get parentdiv from initial div
        if (divName.className == classNameParent) { // check if parent div belongs to specified class
            return divName.id; // return the id of the parent div
        }
    } while (divName.parentNode); // while div has parent do above function
}

如果你想打破循环，那么使用关键字break;。