Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.02.2015, 18:08
Аспирант
Отправить личное сообщение для pifon Посмотреть профиль Найти все сообщения от pifon
 
Регистрация: 17.07.2013
Сообщений: 46

jQuery Манипуляции с DOM
Всем привет!

Немного запутался с оборачиванием 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...">, но не хватает знаний для реализации.

Заранее спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 14.02.2015, 19:56
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

А сразу в html прописать как нужно почему нельзя?
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #3 (permalink)  
Старый 14.02.2015, 21:22
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,823

Сообщение от 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>
Ответить с цитированием
  #4 (permalink)  
Старый 15.02.2015, 10:03
Аспирант
Отправить личное сообщение для pifon Посмотреть профиль Найти все сообщения от pifon
 
Регистрация: 17.07.2013
Сообщений: 46

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не могу сформулировать jQuery .live() для динамического DOM элемента artnik Events/DOM/Window 2 26.09.2015 23:30
Манипуляции внутри созданного окна с помошью jQuery Nubi jQuery 15 24.07.2014 18:48
(DOM) JQuery получение текста ссылки Mila Общие вопросы Javascript 5 25.04.2012 12:36
Jquery. Доступ к объектам в DOM. Селекторы Yes jQuery 5 24.08.2011 10:17
Манипуляции с DOM в обработчике DOMSubtreeModified TheDeadOne jQuery 1 20.06.2010 08:59