從具有Display：none的JavaScript的父div獲取ID

Question

我想獲取特定元素的父元素的ID。 使用display：none隱藏了父元素，因為我需要它不獲取空間。

我已經編寫了一個Javascript，可根據Parents類從元素的父級獲取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）時，所有具有類類別的元素都將顯示：none以及元素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; 。