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...">, но не хватает знаний для реализации. Заранее спасибо! |
А сразу в html прописать как нужно почему нельзя?
|
Цитата:
<!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>
|
Благодарю! В итоге вчера немного иначе реализовал. Но этот код куда элегантнее))) его буду использовать))
|
| Часовой пояс GMT +3, время: 08:04. |