您如何定位此父級，從一個孩子開始，使用僅帶有純JavaScript的類，僅使另一個子div顯示？

Question

因此，我有一堆動態加載的數據，因此我必須使用類來實現。

僅使用純JavaScript而不使用jquery，如何做到這一點，以便當您單擊div中的view more時，隱藏的div僅從父級顯示？

Answer 1

從結構上講，您有兩種選擇。

單擊.classViewMore ，可以獲取事件的目標（很可能在this指針中），該事件的目標將是單擊的.classViewMore項。

從該對象開始，您可以升至父對象（這將使您的父項成為Child項）。

從Child那里，您可以轉到同級兄弟中找到“ Hidden Child ，也可以轉到.classDiv父對象，然后找到包含的.classHiddenDiv 。

這就是使用DOM層次結構查找共享同一父項的其他項。 如果沒有實際的HTML，則很難提供確切的代碼，但這將是這樣的：

function classViewMoreClickHandler(e) {
    // find next sibling of our parent
    var childElem = this.parentNode;
    var hiddenChildElem = childElem.nextSibling; 
}

或者，轉到.classDiv父級，它看起來像這樣：

function classViewMoreClickHandler(e) {

    var parent = this.parentNode.parentNode;
    var hiddenChild = parent.querySelectorAll(".classHiddenDiv")[0];
}

如果您要定期使用純JS工作，那么您可能希望使用純javascript的jQuery的.closest()方法的類似物，該方法可以找到與特定選擇器匹配的祖先，這對於某些常見的選擇器可能是非常有用的父類的DOM導航。 例如，您可以使用以下方法提供更強大的解決方案：

function hasClass(elem, cls) {
    var str = " " + elem.className + " ";
    var testCls = " " + cls + " ";
    return(str.indexOf(testCls) != -1) ;
}

function closest(start, cls) {
    while (start && start !== document.documentElement && !hasClass(start, cls)) {
        start = start.parentNode;
    }
    return start;
}

function classViewMoreClickHandler(e) {

    var p = closest(this, ".classDiv");
    if (p) {
        var hiddenChild = p.querySelectorAll(".classHiddenDiv")[0];
        // do whatever you want to hiddenChild here
    }
}