Форум

pifon · #1 (**permalink**) 14.02.2015, 19:08

Всем привет!

Немного запутался с оборачиванием DOM элементов. Есть такая разметка:

<div class="top">
  <div class="block1"></div>
  <div class="block2"></div>
  <div class="block3"></div>
  <div class="block4"></div>
</div>

Подскажите, пожалуйста, как сделать так, чтобы <div class="block1"> обернулся в <div class="parent1">, а 3 других div обернулись в <div class="parent2">

Короче говоря, чтобы после манипуляций на jQuery получилась такая разметка:

<div class="top">
  <div class="parent1">
    <div class="block1"></div>
  </div>
  <div class="parent2">
    <div class="block2"></div>
    <div class="block3"></div>
    <div class="block4"></div>
  </div>
</div>

Обычными .wrap -подобными методами реализовать не удалось. В качестве алгоритма есть идея - сделать .clone блоков, и встраивание их в прописанные <div class="parent...">, но не хватает знаний для реализации.

Заранее спасибо!

danik.js · #2 (**permalink**) 14.02.2015, 20:56

А сразу в html прописать как нужно почему нельзя?

рони · #3 (**permalink**) 14.02.2015, 22:22

Сообщение от pifon

Обычными .wrap -подобными методами реализовать не удалось.

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
  	$(function() {
    $(".top").each(function() {
        $(">:first", this).wrap('<div class="parent1"></div>');
        $(">:not(:first)", this).wrapAll('<div class="parent2"></div>');
    });
    alert($("body").html())
});
  </script>
</head>

<body>
<div class="top">
  <div class="block1"></div>
  <div class="block2"></div>
  <div class="block3"></div>
  <div class="block4"></div>
  </div>
<div class="top">
  <div class="block1"></div>
  <div class="block2"></div>
  <div class="block3"></div>
  <div class="block4"></div>
  </div>

</body>

</html>

pifon · #4 (**permalink**) 15.02.2015, 11:03

Благодарю! В итоге вчера немного иначе реализовал. Но этот код куда элегантнее))) его буду использовать))

Форум

Справочник

Discord чат

Курсы javascript