Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Разыскивается элемент в строке (https://javascript.ru/forum/events/15482-razyskivaetsya-ehlement-v-stroke.html)

lynch1 01.03.2011 07:00

Разыскивается элемент в строке
 
Ситуация следующая:
Есть строка допустим: "function(1,2,3);"
Её html код: "function<span>(</span>1,2,3<span>)</span>;" Т.е. скобки заключены в теги с каким-то классом.
На эти спаны повешены события onMouseOver и onMouseOut.
Событие onMouseOver подсвечивает скобку на которую навели. А также в этом же событии должен идти поиск следующей скобки, каким методом искать? Как вернуть позицию выделенного элемента? Как получить доступ к следующей скобке как к элементу DOM дерева?
Жду предложений и подсказок. Спасибо.

ksa 01.03.2011 08:54

Цитата:

Сообщение от lynch1
А также в этом же событии должен идти поиск следующей скобки, каким методом искать?

Смотреть все и искать парную данной. Т.е. если все кроме одной уже закрыты и встречается закрывающеяся - это она. Это алгоритм для поиска парной для открывающейся скобки. Для поиска парной к закрывающейся немного сложнее... :)

Aetae 01.03.2011 10:17

Ну во-первых надо начинать с кода собсно разметку формирующего.
Простейший способ который срзу приходит на ум - перебор всех элементов со скобками по очереди, начиная с текущей с применением счётчиков. Т.е. если i==0 и скобка закрывающая - подсвечивать, если ещё одна открывающая - i++, закрывающая i--.

Но тут же на ум пришёл иной, более хитрый вариант: при формировании подсветки перед каждой открывающей скобкой открывать особый контейнер контейнер, после закрывающей закрывать, т.е.:
<span><span>(</span>1, ... 2,3<span>)</span></span>
Тогда открывающая и закрывающая скобки будут элементарно доступны через this.parentNode.firstChild и this.parentNode.lastChild.)

lynch1 01.03.2011 13:07

Цитата:

Тогда открывающая и закрывающая скобки будут элементарно доступны через this.parentNode.firstChild и this.parentNode.lastChild.)
О! Спасибо за вариант, наверняка подойдёт такой хитрючий ))
Всем ответившим +1

lynch1 01.03.2011 14:07

Выложу рабочий вариант, вдруг кому понадобится )
Обрабатываем скобки:
data = data.replace(/([\(\[\{])/gim,'<span>$1');
data = data.replace(/([\)\]\}])/gim,'$1</span>');
data = data.replace(/([\{\}\(\)\[\]])/gim,'<span class="sk" onMouseOver="findsk(this)" onMouseOut="hidesk()">$1</span>');

Функции подсветки:
function findsk(el) {
	el.parentNode.firstChild.style.backgroundColor = '#87CEEB';
	el.parentNode.lastChild.style.backgroundColor = '#87CEEB';
}
function hidesk() {
	el = $('.sk');
	for (i=0; i<el.length; i++) {
			el[i].style.background = 'none';
	}
}

Там кусочек из jq попал...но думаю не проблема заменить )


Часовой пояс GMT +3, время: 15:08.