Как скрыть все элементы, кроме одного, используя jquery? - PullRequest
42 голосов
/ 08 октября 2009

У меня есть HTML-страница:

<head></head>
<body>
  <div>
    <div>
      <div id="myDiv">
      </div>
    </div>
  </div>
</body>

Как скрыть все элементы div и просто поместить myDiv в тело с помощью jquery?

Обновление

Страница может содержать некоторые другие html-элементы, такие как некоторые таблицы, якоря, p и я просто хочу увидеть элемент myDiv.

Ответы [ 4 ]

74 голосов
/ 08 октября 2009

Это должно работать:

$('div:not(#myDiv)').hide();  // hide everything that isn't #myDiv
$('#myDiv').appendTo('body');  // move #myDiv up to the body

Обновление:

Если вы хотите скрыть ВСЕ, что не только div элементов, используйте вместо этого:

$('body > :not(#myDiv)').hide(); //hide all nodes directly under the body
$('#myDiv').appendTo('body');

Вероятно, проще упаковать всю «скрываемую» часть страницы в большой контейнерный элемент и скрыть это напрямую.

Вот так:

 <body>
     <div id="contents">
        <!-- a lot of other stuff here -->
        <div id="myDiv>
        </div>
     </div>
 </body>

Тогда вы можете просто сделать это, что чище и быстрее:

$('#contents').hide();
$('#myDiv').appendTo('body');
34 голосов
/ 24 октября 2012

Хороший общий подход:

$('#the_id').siblings().hide()
$('#the_id').parents().siblings().hide()

Работает для любого типа элемента.

8 голосов
/ 18 января 2011

Если ваша цель - просто увидеть этот контент и больше ничего не видеть, вы всегда можете просто сделать это. Вам не нужен jQuery:

document.body.innerHTML=document.getElementById('myDiv').innerHTML;
1 голос
/ 08 октября 2009
$("div").each(function () { $(this).toggle(!!this.id); });

Обратите внимание, что это явно покажет #myDiv. Если вы просто хотите скрыть остальные элементы:

$("div:not(#myDiv)").show();

Тогда вы можете сделать:

$("#myDiv").appendTo("body");
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...