JavaScript：找到给定孩子类的父div

Question

我的代码看起来像这样

<div id=resultsdiv >
<div id=xxxx class=container>
<a> class=results </a>
<a> class=results </a>
<div id=zzzz class=default>
<p> some default data </p>
</div>
</div>
</div>

我有一个名为“default only”的按钮，当我点击按钮时，所有结果类元素都应该隐藏，只显示默认的class div，以防任何容器div没有任何默认类div，它也应该被隐藏，一旦我再次点击按钮，整个事情应该被逆转这里我的内部div是动态创建的，所以我不知道他们的ID是什么，所以有没有办法实现我的目标仅通过使用类名来寻找？

Answer 1

如果jQuery解决方案适合您，那么这里是代码：

$("#default_only_button_id").on("click", function() {
    $(".container div:not(.default)").toggle();

    if($(".container .default").length == 0) {
        $(".container").toggle();
    }
});

编辑：

根据@ckarmann建议更正

EDIT2：

我实际上没有测试编辑过的代码，但它应该可以工作;）

Answer 2

在JavaScript中使用：

document.getElementsByClassName(className)

详细了解：https://developer.mozilla.org/en-US/docs/DOM/document.getElementsByClassName

在jQuery中使用：$('.results').hide(); 其中.results是CSS类选择器，您可以在以下位置阅读更多内容：http://www.w3schools.com/jquery/sel_class.asp

Answer 3

旧版浏览器（尤其是IE8）不支持

getElementsByClassName。如果你的目标是这样的观众，你可以考虑更纯粹的JS路线：

var x = document.getElementById("resultsdiv").getElementsByTagName("div");
for( var i = 0; i < x.length; i++)
    if(x[i].className == "results") //check other className's as desired
        x[i].style.display = "none";

您还可以使用parentNode等工具来浏览DOM，请参阅here。

请注意，即使采用这种方法，仍可能存在其他一些跨浏览器的担忧。例如，包含多个空格分隔的类而不是单个值的类属性。像jQuery这样的框架有用的原因之一。