VPF::Помогите правильно добавить объект

LittleFuntik

Дата 16.12.2008, 01:18 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 37
Регистрация: 8.8.2007
Где: Украина, Чернигов

Репутация: нет
Всего: нет

В общем, есть такая структура.

Код


<div id="container">
<div>1</div>
<div>2</div>
<div>3</div>
...
</div>

Как мне с помощью JavaScript сделать следующее:
нужно добавить <div>n</div> в конец родителя container, при этом, удалив первый объект div.
То есть "колесико" такое получается.

А то голова не варит сейчас. Вам же на пользу... :(

smile

bars80080

Дата 16.12.2008, 01:43 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 15
Всего: 315

а не проще обновить все элементы на n+1 ? или там всё-таки не числа? или там не не несколько контейнеров, а гораздо больше?

LittleFuntik

Дата 16.12.2008, 01:51 (ссылка)

(нет голосов)

Загрузка ...

Там не числа будут... То сообщения в чате. То есть...
Я делаю чат с этим чудо ajax'ом. smile

Если новое сообщение нашлось, то выдвинуть одно старое и поместить вниз новое.

IDVsbruck

Дата 16.12.2008, 04:33 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 778
Регистрация: 12.11.2006

Репутация: 8
Всего: 22

Ну, с помощью js можно попробовать так:

Код

var container = document.getElementById("container");
if (container.children.length > 3) container.removeChild(container.children[0]);
var new_div = document.createElement("div");
new_div.style.{needed_styles} = ...;
new_div.innerHtml = "{text next row}";
container.appendChild(new_div);

Код будет работать при условии, что в контейнере находятся только дивы. В противном случае надо делать цикл и перебирать все дочерние элементы, пока не встретится первый див. Его удалять и вставлять новый.
Тут очень удобно было бы использовать какую-то библиотеку, к примеру, jQuery. У нее здорово сделаны селекторы и выбор первого дива крайне прост - $("#container div:first").remove() - это и нахождение и удаление. Аналогично добавление - $("#container").append($("<div>").html({text in new div}).css({styles})). Предельно просто и предельно коротко.

LittleFuntik

Дата 16.12.2008, 20:51 (ссылка)

(нет голосов)

Загрузка ...

Спасибо! Все таки подключу библиотеку jQuery. Так почему то не хотелось smile

Все ручками - приятнее

ksnk

Дата 17.12.2008, 00:50 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386

Выбор первого дива достаточно прост в этом случае не только в jQuery, на чистом js оно пишется не сильно страшнее.

Код


var el=document.getElementById('container ').getElementsByTagName('div')[0];
el.parentNode.removeChild(el);

Хотя, если еще и проверять существование промежуточных результатов, получится на пару строк поболее..

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »