如何通过其 class 名称获取兄弟元素，然后仅使用 Javascript 隐藏它？

Question

我有这个 html 结构：

  <div id="xyz"> </div>
  <div class="content"> </div>

我想隐藏名为 content 的 class 元素，给定兄弟元素 ID 为 xyz ，在 jQuery 我可以很容易地这样做:

$("#xyz").siblings('.content').css({"dispaly": "none"});

我怎样才能只使用纯 Javascript 来达到同样的效果？

Answer 1

document.querySelector("#xyz + .content").style.display = "none";

jsfiddle

Answer 2

document.getElementById("xyz").nextElementSibling.style.display = 'none';

Answer 3

这样试试：

var x = document.getElementById("xyz").nextSibling;
while(true){   
   if(typeof(x) === "undefined"){
      break;
   }else if( x.className === "content"){
      x.style.display = 'none';
   }

   x = x.nextSibling;
}

抱歉，我还没有测试这段代码。

如何通过其 class 名称获取兄弟元素，然后仅使用 Javascript 隐藏它？

How to get sibling element by its class name and then hide it using Javascript only?

html

javascript

element