Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Применение библиотек > JQuery. Как пронумеровать добавляемые объекты

Автор: Gold Dragon 14.1.2011, 09:05

На странице есть блоки типа

Код


<div class="moduletable-q1">
</div>
...
<div class="moduletable-q1">
</div>
...
<div class="moduletable-q1">
</div>

Я добавляю некоторые кнопки управления и обрамляю всё в дополнительный блок, которым буду управлять. Что-то типа такого

Код


$(function(){
    $("div[class^=moduletable]").prepend("<h3>...кнопки управления...</h3><div>");
    $("div.moduletable").append("</div>");
});

Вопрос в следующем, как добавить индивидуальный идентификатор к блоку чтобы получить что-то типа такого

Код


<div class="moduletable-q1">
    <h3>...кнопки управления...</h3>
    <div id="qq1">
    </div>
</div>
... <div class="moduletable-q2">
    <h3>...кнопки управления...</h3>
    <div id="qq2">
    </div>
</div>
... <div class="moduletable-q3">
    <h3>...кнопки управления...</h3>
    <div id="qq3">
    </div>
</div>

Автор: ksnk 14.1.2011, 09:24

http://api.jquery.com/append/

Цитата

.append( function(index, html) )
function(index, html)A function that returns an HTML string to insert at the end of each element in the set of matched elements. Receives the index position of the element in the set and the old HTML value of the element as arguments.

Автор: Gold Dragon 14.1.2011, 09:34

Ну коль знаешь про это, то можно ли по русски и лучше с примером ;)
я что-то не понял как это использовать (ну или где-то ошибаюсь)

Автор: ksnk 14.1.2011, 10:23

Код


$("div.moduletable").append(function(index){return '<div id="qq'+index+'"/>';});

что-то вроде такого

Автор: Gold Dragon 14.1.2011, 11:21

не работает.. да и синтаксис по документации другой

Автор: ksnk 14.1.2011, 11:56

Цитата(Gold Dragon @ 14.1.2011, 11:21

)

не работает..

Код


<script src="jquery.js"></script>

<div class="moduletable"></div>
<div class="moduletable"></div>
<div class="moduletable"></div>
<div class="moduletable"></div>
<div class="moduletable"></div>

<script type="text/javascript">
$(function(){
$("div.moduletable").append(function(index){return '<div id="qq'+index+'"/>';});
})
</script>

а у меня - работает... Что я делаю неправильно?

Цитата(Gold Dragon @ 14.1.2011, 11:21

)

да и синтаксис по документации другой

как это - другой? smile

Добавлено через 41 секунду
Версия jquery должна быть 1.4

Автор: Gold Dragon 14.1.2011, 12:22

чёрт.. всю голову сломал... оказалось у меня каким-то образом была подключена 1.3.2 smile

Автор: Gold Dragon 14.1.2011, 12:38

возникла опять маленькая проблема.. Функция автоматически завершает тег :(
мне нужно чтобы весь блок был в блоке

Код


<div class="moduletable-q1">
    <h3>...кнопки управления...</h3>
    <div id="qq1">
        <div>...Здесь содержание блока...</div>
    </div>
</div>

а получается

Код


<div class="moduletable-q1">
    <h3>...кнопки управления...</h3>
    <div id="qq1"></div>
    <div>...Здесь содержание блока...</div>
</div>

как быть?

Автор: ksnk 14.1.2011, 12:53

Код


$("div.moduletable").html(function(index,old){return '<h3>...кнопки управления...</h3><div id="qq'+index+'">'+old+'</div>';});

Тогда что-то такое...

Автор: Gold Dragon 14.1.2011, 13:21

уже попробовал, но у меня произошло дублирование блоков

Автор: ksnk 14.1.2011, 15:44

Цитата(Gold Dragon @ 14.1.2011, 13:21

)

уже попробовал, но у меня произошло дублирование блоков

Код


<script src="http://yandex.st/jquery/1.4.2/jquery.min.js"></script>
<div class="moduletable">aaaaaaaaaaaaaaaaa</div>
<div class="moduletable">bbbbbbbbbbbbbbb</div>
<div class="moduletable">cccccccccccccccc</div>
<div class="moduletable">dddddddddddddddddd</div>
<div class="moduletable">eeeeeeeeeeeeeeeeee</div>
<script type="text/javascript">
$(function(){
$("div.moduletable").html(function(index,old){return '<h3>...кнопки управления...</h3><div id="qq'+index+'">'+old+'</div>';});
})
</script>

Автор: Gold Dragon 14.1.2011, 16:07

совсем забыл что есть и другой путь ...
спасибо!