Форумы портала PHP.SU :: Версия для печати :: добавление элемента после элемента

Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770
Форумы портала PHP.SU :: Версия для печати :: добавление элемента после элемента

Форумы портала PHP.SU » Клиентская разработка » JavaScript & VBScript » добавление элемента после элемента

Страниц (1): [1]

1. haveFun - 19 Апреля, 2011 - 01:06:36 - перейти к сообщению

привет. столкнулся с такой вот труднореализуемой задачей.
допустим форма имеет такой вид:

CODE (html):
скопировать код в буфер обмена

<div>
    <div id="r1">
        text1
        <div id="g1">
            text2
        </div>
        <div id="g2">
            text3
        </div>
    </div>
<!-- сюда нужно воткнуть див -->
    <div id="r2">
        text4
        <div id="g3">
            text5
        </div>
    </div>
</div>

, где тексты (text) выгружаются из бд.
структура представляет из себя что-то типа содержания с разделами "r", и главами "g".
допустим мне нужно добавить новый раздел(<div id="NEW">), но не в конец, а в середину, чтобы он был вторым, а второй соответственно стал третьим.
и тоже самое с главами внутри их.
как быть? Не понял

2. OrmaJever - 19 Апреля, 2011 - 01:12:49 - перейти к сообщению

Может как-то так http://javascript[dot]ru/tutorial/do[dot][dot][dot]konkretnoe-mesto

3. haveFun - 19 Апреля, 2011 - 19:49:30 - перейти к сообщению

OrmaJever пишет:

Может как-то так http://javascript[dot]ru/tutorial/do[dot][dot][dot]konkretnoe-mesto

к сожалению это косячный метод, либо я просто не знаю как сделать чтобы в процессе добавления менялись параметры в функциях:

CODE (javascript):
скопировать код в буфер обмена

function asd(x) {
        var list = document.getElementById('list2')
        var firstLi = list.getElementsByTagName('div')[x]
        var newListElem = document.createElement('div')
                newListElem.innerHTML = 'Новый элемент списка'
 
                list.insertBefore(newListElem, firstLi)
}

CODE (html):
скопировать код в буфер обмена

<div id="list2">
        <div id="1">Первый элемент - <a href="#" onClick="javascript: asd(1);">PLUS</a></div>
        <div id="2">Второй элемент - <a href="#" onClick="javascript: asd(2);">PLUS</a></div>
</div>

asd(1) и asd(2)

вопрос в силе.

4. OrmaJever - 19 Апреля, 2011 - 20:04:34 - перейти к сообщению

haveFun пишет:

var firstLi = list.getElementsByTagName('div')[x]

елементы масива начинаются с 0, если вы передаёте как параметр 1 и 2 то это будет 2 и 3 елементы масива, а 3 нету.

5. haveFun - 19 Апреля, 2011 - 20:18:10 - перейти к сообщению

OrmaJever пишет:

haveFun пишет:

var firstLi = list.getElementsByTagName('div')[x]

елементы масива начинаются с 0, если вы передаёте как параметр 1 и 2 то это будет 2 и 3 елементы масива, а 3 нету.

если я два раза создам перед нулевым, то тот который был первым - станет третьим. суть проблемы ясна?

6. OrmaJever - 19 Апреля, 2011 - 20:41:04 - перейти к сообщению

Да суть ясна. Тогда лутше педавать параметром this

CODE (htmlphp):
скопировать код в буфер обмена

<script>
function asd(x) {
        var list = document.getElementById('list');
        var newListElem = document.createElement('div');
        newListElem.innerHTML = 'New elem before ' + x.innerHTML;
        newListElem.onclick = "asd(this);return false;";
 
        list.insertBefore(newListElem, x);
}
</script>
<div id="list">
        <div onClick="asd(this);return false;">First</div>
        <div onClick="asd(this);return false;">Second</div>
</div>

Проверил и немного изменил. Так надо?

7. haveFun - 19 Апреля, 2011 - 21:10:50 - перейти к сообщению

да, спасибо, но только после а не перед %)
кстати вот это

CODE (javascript):
скопировать код в буфер обмена

newListElem.onclick = "asd(this);return false;";

отказывается работать почему-то

8. OrmaJever - 19 Апреля, 2011 - 21:39:03 - перейти к сообщению

haveFun пишет:

отказывается работать почему-то

Что значит отказывается работать? В последней опере проверял всё работает

9. haveFun - 19 Апреля, 2011 - 21:59:11 - перейти к сообщению

OrmaJever пишет:

haveFun пишет:

отказывается работать почему-то

Что значит отказывается работать? В последней опере проверял всё работает

вот и я говорю, почему-то...
в четвертом огнелисе при нажатии на новый див ничего не происходит.
в опере действительно добавляются новые дивы.

можно как-нибудь реализовать ф-ию insertAfter, которой не существует, а то insertBefore ну совсем не вариант?

отсюда ничего не понял, что за входные параметры...

Цитата:

Как и getElementsByClass, этой функции почему-то нет в стандарте DOM. Возможно, чтобы избежать дублирования функционала, т.к. insertAfter реализуется всего одной строчкой.

CODE (javascript):
скопировать код в буфер обмена

function insertAfter(parent, node, referenceNode) {
    parent.insertBefore(node, referenceNode.nextSibling);
}

10. OrmaJever - 19 Апреля, 2011 - 22:08:41 - перейти к сообщению

haveFun пишет:

в четвертом огнелисе при нажатии на новый див ничего не происходит.
в опере действительно добавляются новые дивы.

getElementsByClass в опере тоже работает прекрасно, а вот за другие браузеры ручатся не могу.

haveFun пишет:

сюда ничего не понял, что за входные параметры...

Чесно сказать я не очень знаю Js, просто раньше нужно было вот и вычитал про insertBefore, но я уверен что insertAfter так же можно написать но я немогу подсказать. Напиши на форум http://javascript[dot]ru/ там точно помогут!

11. haveFun - 21 Апреля, 2011 - 02:50:36 - перейти к сообщению

OrmaJever пишет:

haveFun пишет:

getElementsByClass в опере тоже работает прекрасно, а вот за другие браузеры ручатся не могу.

в огнелисе сработала такая конструкция:

CODE (javascript):
скопировать код в буфер обмена

newListElem.onclick = function() {
        asd(this);
        return false;
}