Помогите со скриптом
Не могу разобраться, что нужно поменять в скрипте, что бы он не заменял теги, а добавлял новый внутрь...
Есть html код: <div class="centerbox"> <div class="content"> <div class="smallpicitem">IMAGE INSIDE</div> <div class="smallpicitem">IMAGE INSIDE</div> <div class="smallpicitem">IMAGE INSIDE</div> <div class="smallpicitem">IMAGE INSIDE</div> </div> </div> И есть jquery скрипт, который должен обрамлять каждые два элемента <div class="smallpicitem">IMAGE INSIDE</div> внутрь тэга <div class="wrapping"></div> сам код:
$(function() {
$('.centerbox .content').each(function(){
var li = $('.smallpicitem'), length = Math.ceil(li.length / 2), i = 0, uls = $('<div></div>');
for(; i < length; i++){
$('<div class="wrapping"></div>').append(li.filter(':gt(' + (i*2-1) + ')').filter(':lt(' + (i+1)*2 + ')')).appendTo(uls);
}
$(this).replaceWith(uls.children());
});
});
На практике происходит следующее: скрипт заменяет <div class="content"> на <div class="wrapping"> -но мне не нужна замена. Мне нужно, что бы элементы обрамлялись в <div class="wrapping"></div> внутри <div class="content">. Для наглядности покажу кодом, то что пытаюсь получить:
<div class="centerbox">
<div class="content">
<div class="wrapping">
<div class="smallpicitem">IMAGE INSIDE</div>
<div class="smallpicitem">IMAGE INSIDE</div>
</div>
<div class="wrapping">
<div class="smallpicitem">IMAGE INSIDE</div>
<div class="smallpicitem">IMAGE INSIDE</div>
</div>
</div>
</div>
Помогите доделать скрипт, уважаемые! |
<style>
.content {
border: 2px solid #f00;
}
.wrapping {
margin: 10px;
border: 2px solid #0f0;
}
.smallpicitem {
margin: 10px;
border: 2px solid #00f;
}
</style>
<div class="centerbox">
<div class="content">
<div class="smallpicitem">IMAGE INSIDE 1</div>
<div class="smallpicitem">IMAGE INSIDE 2</div>
<div class="smallpicitem">IMAGE INSIDE 3</div>
<div class="smallpicitem">IMAGE INSIDE 4</div>
<div class="smallpicitem">IMAGE INSIDE 5</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(function () {
var $wrapper;
$(".smallpicitem").each(function (index) {
if (index % 2 == 0) {
$wrapper = $('<div class="wrapping"></div>');
$wrapper.insertBefore(this);
}
$wrapper.append(this);
});
});
</script>
|
Спасибо тебе добрый человек! :thanks:
взаимно могу консультировать по Drupal и муз. софту)) |
| Часовой пояс GMT +3, время: 23:43. |