Вот делаем мы какой-то богатый клиентский интерфейс. Есть у нас DOM-узел, на который, например, поставили выделение. А потом нам надо обновить целиком блок (то есть грохнуть ветку DOM-дерева), а выделение должно сохраниться. При этом не факт, что у выделенного узла есть айди или класс, на который можно положиться.
Чтоб решить эту задачу, я накидал довольно тупое jQuery-расширение. Публикую здесь на память.
Вот рабочий пример в ифрейме, можно щелкать:
В табличке ячейки, в каждой по 3 числа, завернутых в разные теги (i, b, u, а последние два вместе обернуты в span). Можно щелкать и выделять разные штуки - каждое число по отдельности, группу из двух последних или всю ячейку.
При выделении элемента появляется селектор, который генерирует мой jQuery-плагин. На каждую из частей селектора можно навести мышь, чтоб увидеть, чему она соответствует.
Нажатие на ссылку "Перегенерировать" удаляет табличку целиком и создает ее заново, заполняя другими цифрами. При этом выделение остается на той же позиции, где было до уничтожения таблички. Чего мы и добивались, собственного говоря.
Вот исходник самой приблуды:
$.fn.generate_selector = function(parent) {
if (this.length == 0) {
return false;
}
if (typeof(parent) == 'undefined') {
parent = document;
} else if (parent instanceof $) {
parent = parent.get(0);
}
var selector = [];
var node = this.first();
while (node.length > 0 && node.get(0) !== parent) {
selector.unshift(':nth-child(' + (node.index() + 1)+ ')');
node = node.parent();
}
return '>'+selector.join('>');
};
Использовать можно так:
var selector = $('#needle').generate_selector($('#haystack'));
$('#haystack').find(selector); // найдет needle по позиции
Так мы получаем селектор, позволяющий найти узел #needle относительно какого-то другого узла #haystack. Если при генерации селектора не указывать аргумент, получим путь от корневого узла.
Пока применяю в рабочем проекте для сохранения выделений. У кого есть идеи, как это хозяйство еще использовать - пишите в комментарии :)
Пример в отдельном окне и исходник его смотрим вот тут.
Милым дамам, любящим почитать про хитрости JavaScript, от меня - запоздалая онлайн открытка к 8-му марта. Будьте счастливы, дыц:
Чтобы открыть коробку, нажмите на неё
магазин для детей Жили-были
