Генерация списка из DIV'ов

31.08.2011, 15:09. **Показов** 1110. **Ответов** 0

Студворк — интернет-сервис помощи студентам

Приветствую всех.
Решил обратиться на форум, ибо уже второй день не могу сообразить, как мне реализовать свои задумки.
В данный момент времени изучать js и jquery нету, по этому прошу помочь мне.

Описание мыслей:

Есть пример работы одного js скрипта основанного на drag&drop системе. Сам скрипт можно глянуть тут: _http://www.dhtmlgoodies.com/scripts/drag-drop-custom/demo-drag-drop-3.html
В ходе работы со страничкой, пользователь перетаскивает блоки(обычные DIV'ы с персональными идентификаторами) с названиями столиц в блоки(опять же DIV'ы, каждый со своим идентификатором) с названиями государств. Пример скрипта заключается в сравнении, правильно ли пользователь выбрал столицу государства, меня же этот пункт не интересует, его я вырежу без проблем.

Как я понимаю, после перетаскивания в следующие блоки с названием государств:

HTML5
1
2
3
4
5
6
7
8
9
<div id="countries">
    <div id="kingdom_1" class="dragableBoxRight">Italy<div class="dragableBox" id="box1">Oslo</div></div>
    <div id="kingdom_2" class="dragableBoxRight">Spain</div>
    <div id="kingdom_3" class="dragableBoxRight">Norway</div>
    <div id="kingdom_4" class="dragableBoxRight">Denmark</div>
    <div id="kingdom_5" class="dragableBoxRight">South Korea</div>
    <div id="kingdom_6" class="dragableBoxRight">Sweden</div>
    <div id="kingdom_7" class="dragableBoxRight">United States</div>
</div>

Самих блоков с названиями столиц:

HTML5
1
2
3
4
5
6
7
8
9
10
    
<div id="dropContent">
    <div class="dragableBox" id="box1">Oslo</div>
    <div class="dragableBox" id="box2">Stockholm</div>
    <div class="dragableBox" id="box3">Washington</div>
    <div class="dragableBox" id="box4">Copenhagen</div>
    <div class="dragableBox" id="box5">Seoul</div>
    <div class="dragableBox" id="box6">Rome</div>
    <div class="dragableBox" id="box7">Madrid</div>
</div>

Код грубо говоря выглядит примерно так:

HTML5
1
2
3
4
5
6
7
8
9
<div id="countries">
    <div id="box106" class="dragableBoxRight">Italy <div class="dragableBox" id="box1">Oslo</div> </div>
    <div id="box107" class="dragableBoxRight">Spain <div class="dragableBox" id="box2">Stockholm</div> </div>
    <div id="box101" class="dragableBoxRight">Norway <div class="dragableBox" id="box3">Washington</div> </div>
    <div id="box104" class="dragableBoxRight">Denmark <div class="dragableBox" id="box4">Copenhagen</div> </div>
    <div id="box105" class="dragableBoxRight">South Korea <div class="dragableBox" id="box5">Seoul</div> </div>
    <div id="box102" class="dragableBoxRight">Sweden <div class="dragableBox" id="box6">Rome</div> </div>
    <div id="box103" class="dragableBoxRight">United States <div class="dragableBox" id="box7">Madrid</div> </div>
</div>

________

Теперь же мне нужно отправить в свой php обработчик строку с данными, с которой я смогу работать. На вид строки мне наплевать, с ней я смогу извратиться, как угодно.
Суть лишь в том, что мне нужно исходя из предыдущего примера, получить, что-то, такое:

PHP
1
box106=box1&box107=box2&box101=box3&box104=box4&box105=box5&box102=box6&box103=box7

То есть я должен получить информацию, о том, какому государству, какую столицу присвоил пользователь.
Далее на кнопку вешаю обработчик, на подобие:

JavaScript
1
2
3
4
var order = "box106=box1&box107=box2&box101=box3&box104=box4&box105=box5&box102=box6&box103=box7";
$.post("updateIn.php", order, function(theResponse){
$("#contentRight").html(theResponse); // Вставка ответа с сервера в div c id="contentRight"
});

Мой php скрипт обработает эту строку, разобьёт все параметры, затолкает их в базу, извратится с ними, обмажет соусом, да пофигу, что ещё.
Вся соль в том, что мои знания js на безумно низком уровне, и я не понимаю, как можно перебрать id div'ов в другом div'е

Нужно сделать обработку всех div'ов в div'e #countries, после беглых взглядом по jquery, напрашивается, что-то, типа:
!(Я не знаю js, написанное ниже скорее всего, полный бред)

JavaScript
1
$(#countries).find("DIV").id

или

JavaScript
1
2
3
4
5
6
7
8
function Trololo()
{
var difx = document.getElementsById('countries');
var objects = difx.getElementsByTagName('div');
for(var i=0;i<objects.length;i++){
//тут, какая-то обработка
}
}

_____
Надеюсь, смог собраться кашу образовавшуюся в голове в более-менее восприимчивую форму. Если возникнут вопросы или непонимания, отписывайтесь, отвечу по возможности быстро.

В итоге нужно сделать скрипт на js, jquery, который будет формировать мне строку вида:

PHP
1
box106=box1&box107=box2&box101=box3&box104=box4&box105=box5&box102=box6&box103=box7

Добавлено через 2 часа 28 минут
Вопрос уже решён, спасибо за помощь пользователю walik с форума javascript(тчк)ru

JavaScript
1
2
3
4
5
var str = [];
$('#countries div.dragableBoxRight').each(function() {
  str.push($(this).attr('id')+'='+$('div.dragableBox', this).attr('id'));
});
str = str.join('&');

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит переходные токи и напряжения на элементах схемы. . . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .