Разыскивается элемент в строке

[lynch1]

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

[ksa]

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

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

[Aetae]

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

Но тут же на ум пришёл иной, более хитрый вариант: при формировании подсветки перед каждой открывающей скобкой открывать особый контейнер контейнер, после закрывающей закрывать, т.е.:

<span><span>(</span>1, ... 2,3<span>)</span></span>

Тогда открывающая и закрывающая скобки будут элементарно доступны через this.parentNode.firstChild и this.parentNode.lastChild.)

[lynch1]

Тогда открывающая и закрывающая скобки будут элементарно доступны через this.parentNode.firstChild и this.parentNode.lastChild.)

О! Спасибо за вариант, наверняка подойдёт такой хитрючий ))
Всем ответившим +1

[lynch1]

Выложу рабочий вариант, вдруг кому понадобится )
Обрабатываем скобки:

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 попал...но думаю не проблема заменить )