Разыскивается элемент в строке
Ситуация следующая:
Есть строка допустим: "function(1,2,3);" Её html код: "function<span>(</span>1,2,3<span>)</span>;" Т.е. скобки заключены в теги с каким-то классом. На эти спаны повешены события onMouseOver и onMouseOut. Событие onMouseOver подсвечивает скобку на которую навели. А также в этом же событии должен идти поиск следующей скобки, каким методом искать? Как вернуть позицию выделенного элемента? Как получить доступ к следующей скобке как к элементу DOM дерева? Жду предложений и подсказок. Спасибо. |
Цитата:
|
Ну во-первых надо начинать с кода собсно разметку формирующего.
Простейший способ который срзу приходит на ум - перебор всех элементов со скобками по очереди, начиная с текущей с применением счётчиков. Т.е. если i==0 и скобка закрывающая - подсвечивать, если ещё одна открывающая - i++, закрывающая i--. Но тут же на ум пришёл иной, более хитрый вариант: при формировании подсветки перед каждой открывающей скобкой открывать особый контейнер контейнер, после закрывающей закрывать, т.е.: <span><span>(</span>1, ... 2,3<span>)</span></span>Тогда открывающая и закрывающая скобки будут элементарно доступны через this.parentNode.firstChild и this.parentNode.lastChild.) |
Цитата:
Всем ответившим +1 |
Выложу рабочий вариант, вдруг кому понадобится )
Обрабатываем скобки: 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. |