您如何定位此父级，从一个孩子开始，使用仅带有纯JavaScript的类，仅使另一个子div显示？

Question

So I have a bunch of data thats being loaded in dynamically so I have to use classes to pull this off.

Just using pure javascript and not jquery, how do I make it so that when you click view more in a div, it makes the hidden div only show from THIS parent?

Answer 1

Structurally, you have a couple choices.

When .classViewMore is clicked, you can get the target of the event (most likely in the this pointer) that will be the .classViewMore item that was clicked on.

From that object, you can up to the parent (that gets you the Child item in your common parent.

From the Child , you can either go to a sibling to find Hidden Child or you can go up to the .classDiv parent and then find the containing .classHiddenDiv .

It's all about using the DOM hierarchy to find the other item that shares a common parent. Without actual HTML, it's a little hard to give exact code, but it would be something like this:

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

or, going up to the .classDiv parent, it would look like this:

function classViewMoreClickHandler(e) {

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

If you're going to work in plain JS regularly, then you probably want an analog for jQuery's .closest() method in plain javascript which finds an ancestor that matches a specific selector which can be really, really useful for this up to some common parent kind of DOM hiearchy navigation. For example, you could make a bit more robust solution using this:

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
    }
}