Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.03.2009, 13:20
Новичок на форуме
Отправить личное сообщение для Mizantrop Посмотреть профиль Найти все сообщения от Mizantrop
 
Регистрация: 06.03.2009
Сообщений: 4

Нужно обернуть кусок 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>


Заранее спасибо!

Последний раз редактировалось Mizantrop, 06.03.2009 в 17:06.
Ответить с цитированием
  #2 (permalink)  
Старый 06.03.2009, 13:58
Профессор
Отправить личное сообщение для AzriMan Посмотреть профиль Найти все сообщения от AzriMan
 
Регистрация: 27.02.2009
Сообщений: 215

эээ. ну во первых я бы переделал пост и вместо скриншота сделал цитату с тегом кода. как-бы так более логично.

--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]);
}



думаю вот примерно так это можно сделать

Последний раз редактировалось AzriMan, 06.03.2009 в 14:25.
Ответить с цитированием
  #3 (permalink)  
Старый 06.03.2009, 19:34
Новичок на форуме
Отправить личное сообщение для Mizantrop Посмотреть профиль Найти все сообщения от Mizantrop
 
Регистрация: 06.03.2009
Сообщений: 4

Огромное спасибо!
Ответить с цитированием
  #4 (permalink)  
Старый 06.03.2009, 20:50
Профессор
Отправить личное сообщение для AzriMan Посмотреть профиль Найти все сообщения от AzriMan
 
Регистрация: 27.02.2009
Сообщений: 215

что, заработало, правда? круто я на скорую руку написал даже не тестив
Ответить с цитированием
  #5 (permalink)  
Старый 06.03.2009, 23:53
Новичок на форуме
Отправить личное сообщение для Mizantrop Посмотреть профиль Найти все сообщения от Mizantrop
 
Регистрация: 06.03.2009
Сообщений: 4

Ну пришлось чуть-чуть подправить, но на рождение такого кода у меня бы ушло несколько рабочих дней. Так что не побоюсь повториться: спасибо! ))
Ответить с цитированием
  #6 (permalink)  
Старый 07.03.2009, 10:19
Профессор
Отправить личное сообщение для AzriMan Посмотреть профиль Найти все сообщения от AzriMan
 
Регистрация: 27.02.2009
Сообщений: 215

а что пришлось подправить? (чисто ради интереса)
подгонка под свои данные или еще какие-то исправления?
Ответить с цитированием
  #7 (permalink)  
Старый 07.03.2009, 12:31
Новичок на форуме
Отправить личное сообщение для Mizantrop Посмотреть профиль Найти все сообщения от Mizantrop
 
Регистрация: 06.03.2009
Сообщений: 4

Ну там совсем незначительные добавления.
Рабочий код в итоге выглядит так:
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]);
}

Последний раз редактировалось Mizantrop, 07.03.2009 в 12:35.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск