时间戳

首页 > 解决方案 > 选择 HTML 中的每个子元素，除了一个

javascript - 选择 HTML 中的每个子元素，除了一个

问题描述

我正在尝试使用 javascript 在我的网站中编辑 HTML 元素的样式，但不必编写除一个之外的每个子元素，javascript 中是否有一种方法可以选择父 div 下的所有内容，除了一个子元素<div id = "pages">？

HTML

<div id = "pages">
  <div id = "page-1"></div>
  <div id = "page-2"></div>
  <div id = "page-3"></div>
  <div id = "page-4"></div>
</div>

Javascript

//is there a way to select every pages in div id = "pages" except for one page without typing 
//everything manually?
document.getElementbyId("page-1").style.display = "none";
document.getElementbyId("page-2").style.display = "block";
document.getElementbyId("page-3").style.display = "none";
document.getElementbyId("page-4").style.display = "none";

标签： javascripthtml

解决方案

this way:

#pages > div:not([id="page-2"]) {
  display : none;
}
<div id = "pages">
  <div id="page-1">page-1</div>
  <div id="page-2">page-2</div>
  <div id="page-3">page-3</div>
  <div id="page-4">page-4</div>
</div>

If you hate CSS:

function ShowPage(pageID)
  {
  document.querySelectorAll('#pages > div').forEach(el =>
    {
    el.style.display = (el.id === pageID) ? 'block' : 'none'
    })
  }

ShowPage('page-2')
<div id="pages">
  <div id="page-1">page-1</div>
  <div id="page-2">page-2</div>
  <div id="page-3">page-3</div>
  <div id="page-4">page-4</div>
</div>

推荐阅读