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 · 90 камментов · рейтинг 19.76
28.04.2008 · 44 каммента · рейтинг 9.84
23.01.2013 · 19 камментов · рейтинг 9.4
30.01.2013 · 13 камментов · рейтинг 7.8
29.08.2007 · 28 камментов · рейтинг 7.58

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

18.04.2017  ДубрОбработка кликов и цели в Яндекс.Метрике, улучшенный вариант: Вячеслав, блин, я там скобку потерял =) Обновил, ...
17.04.2017  Вячеславтам же: вот http://www.totalat.ru/service/remont-akpp-bmw/
17.04.2017  Вячеславтам же: Вашу версию вставил. Даже alert проверочный вывод...
17.04.2017  Вячеславтам же: То что вы там запостили это вместо последнего куск...
17.04.2017  Дубртам же: Привет! 1) код лучше запостить куда-нибудь на ht...

Статсы