Нужно обернуть кусок html кода в div силами JavaScript
Помогите, пожалуйста, решить мою проблему!
Проблема такая: движок генерирует следующий код html: <body> <div id="mainmenucont"> <div class="moduletable"> <a class="mainlevel" title="Звук" style="display: block;" href="#">Звук</a> <a id="active_menu" class="mainlevel" title="Аксесуары" style="display: block; font-style: italic;" href="#">Аксесуары</a> <a class="sublevel" title="Freefloat" style="display: block;" href="#"> Freefloat</a> <a class="sublevel" title="Кейсы, кофры, сумки" style="display: block;" href="#"> Кейсы, кофры, сумки</a> <a class="sublevel" title="Конверты" style="display: block;" href="#"> Конверты</a> <a class="sublevel" title="Настенные часы" style="display: block;" href="#"> Настенные часы</a> <a class="sublevel" title="Пакеты" style="display: block;" href="#"> Пакеты</a> <a class="sublevel" title="Слипматы" style="display: block;" href="#"> Слипматы</a> <a class="sublevel" title="Средства чистки" style="display: block;" href="#"> Средства чистки</a> <a class="sublevel" title="Фонарики" style="display: block;" href="#"> Фонарики</a> </div> </div> </body> Необходимо силами JavaScript заключить все теги с классом "sublevel" в новый див с определённым id. То есть должен получиться примерно вот такой код: <body> <div id="mainmenucont"> <div class="moduletable"> <a class="mainlevel" title="Звук" style="display: block;" href="#">Звук</a> <a id="active_menu" class="mainlevel" title="Аксесуары" style="display: block; font-style: italic;" href="#">Аксесуары</a> <div id="sublevelcont"> <a class="sublevel" title="Freefloat" style="display: block;" href="#"> Freefloat</a> <a class="sublevel" title="Кейсы, кофры, сумки" style="display: block;" href="#"> Кейсы, кофры, сумки</a> <a class="sublevel" title="Конверты" style="display: block;" href="#"> Конверты</a> <a class="sublevel" title="Настенные часы" style="display: block;" href="#"> Настенные часы</a> <a class="sublevel" title="Пакеты" style="display: block;" href="#"> Пакеты</a> <a class="sublevel" title="Слипматы" style="display: block;" href="#"> Слипматы</a> <a class="sublevel" title="Средства чистки" style="display: block;" href="#"> Средства чистки</a> <a class="sublevel" title="Фонарики" style="display: block;" href="#"> Фонарики</a> </div> </div> </div> </body> Заранее спасибо! |
эээ. ну во первых я бы переделал пост и вместо скриншота сделал цитату с тегом кода. как-бы так более логично.
--edited а по теме вопроса: 1. пользуемся кодом, предоставленным Dustin Diaz для получения всех элементов с заданным классом:
function getElementsByClass(searchClass,node,tag) {
var classElements = new Array();
if ( node == null )
node = document;
if ( tag == null )
tag = '*';
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
} //if
} //for
return classElements;
}
и вызов:
var sublevel_id = getElementsByClass("sublevel", document, "A");
//document для поиска элементов во всем дереве, или указание родителя с которого начинаешь искать
//А - тег <a> в котором у тебя стоят эти классы. можно * для людых тегов
или можно воспользоваться такой обёрткой:
if(document.getElementsByClassName) {
//Firefox 3 C++ native implementation
var sublevel_id = document.getElementsByClassName("sublevel");
} else {
//Dustin Diaz's getElementsByClass implementation
var sublevel_id = getElementsByClass("sublevel", document, "A");
}
Это позволит сэкономить время поиска элементов для Gecko браузеров. Далее создаем новый див
var contentDiv = document.createElement('DIV');
//вместо document нужно указать родителя для вставляемых потомков
и в него копируем эти элементы.
var sublevel_id_len = sublevel_id.length;
for (var ind=0; ind<sublevel_id_len; ind++)
{
contentDiv.appendChild(sublevel_id[ind]);
}
и нужно удалить старые записи:
function removeElement(element)
{
element.parentNode.removeChild(element);
return true;
}
var sublevel_id_len = sublevel_id.length;
for (var ind=0; ind<sublevel_id_len; ind++)
{
removeElement(sublevel_id[ind]);
}
конечно, последние две цитаты с кодом можно объединить:
function removeElement(element)
{
element.parentNode.removeChild(element);
return true;
}
var sublevel_id_len = sublevel_id.length;
for (var ind=0; ind<sublevel_id_len; ind++)
{
contentDiv.appendChild(sublevel_id[ind]);
removeElement(sublevel_id[ind]);
}
думаю вот примерно так это можно сделать :) |
Огромное спасибо! :)
|
что, заработало, правда? круто :) я на скорую руку написал даже не тестив :)
|
Ну пришлось чуть-чуть подправить, но на рождение такого кода у меня бы ушло несколько рабочих дней. Так что не побоюсь повториться: спасибо! ))
|
а что пришлось подправить? (чисто ради интереса)
подгонка под свои данные или еще какие-то исправления? |
Ну там совсем незначительные добавления.
Рабочий код в итоге выглядит так:
function getElementsByClass(searchClass,node,tag) {
var classElements = new Array();
if ( node == null )
node = document;
if ( tag == null )
tag = '*';
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
} //if
} //for
return classElements;
}
if(document.getElementsByClassName) {
var sublevel_id = document.getElementsByClassName("sublevel");
} else {
var sublevel_id = getElementsByClass("sublevel", document, "A");
}
var duu = document.getElementById("mainmenucont");
var contentDiv = document.createElement('DIV');
contentDiv.setAttribute("id", "sublevelcont");
document.body.insertBefore(contentDiv, duu);
var sublevel_id_len = sublevel_id.length;
for (var i = 0; i < sublevel_id_len; i++)
{
contentDiv.appendChild(sublevel_id[i]);
}
|
| Часовой пояс GMT +3, время: 18:45. |