Dubrowsky
Хроники одного дупла
Блогово  →  WebDev  → 

jQuery - генерируем селектор для элемента

12 Марта 2013 года

Вот делаем мы какой-то богатый клиентский интерфейс. Есть у нас 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-му марта. Будьте счастливы, дыц:


Чтобы открыть коробку, нажмите на неё
магазин для детей Жили-были

Написать коммент: памятка постеру

 

Крутые посты wtf??? →

02.10.2012 · 91 каммент · рейтинг 18.3
28.04.2008 · 44 каммента · рейтинг 9.42
30.01.2013 · 13 камментов · рейтинг 7.14
28.03.2008 · 23 каммента · рейтинг 6.78
19.01.2008 · 20 камментов · рейтинг 6.27

Последне камменты

16.02.2018  CrazyMiheyКак изменить оболочку (shell) по умолчанию для пользователя Linux: Ну и сколько Страждущих ломанулись подбирать Парол...
28.01.2018  Привет Ера Связь: 04acw1pf8fwgmqhpfp22t6398o4zszhe3x9lj7luwizkodzt7...
26.01.2018  JasonСвязной.Банк закрыл возможность пополнения WebMoney: Hello Здравствуйте. Сервис продвижения в социальны...
24.01.2018  Annaтам же: Hi Здравствуйте. Сервис продвижения в социальных с...
14.12.2017  БраузерНовый Яндекс.Браузер - браузер "Yandex" (отзыв / обзор): Я предпочитаю использовать яндекс браузер

Статсы