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 камментов · рейтинг 18.62
27.06.2012 · 37 камментов · рейтинг 11.64
28.04.2008 · 44 каммента · рейтинг 9.54
06.03.2008 · 29 камментов · рейтинг 7.69
19.01.2008 · 20 камментов · рейтинг 6.34

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

18.11.2017  JohnКак закрыть окно Skype / свернуть нафиг в трэй: Спасибо, добрый человек! Неимоверно раздражало.
10.11.2017  NikПочему не работает form.submit(): Автор, спасибо за статью 5-летней давности. Подари...
27.10.2017  ДенисОбработка кликов и цели в Яндекс.Метрике, улучшенный вариант: Блин. А для не в зуб ногой - можно код целиком выл...
17.10.2017  ДубрDenwer - настройка алиасов (ServerAlias): Ахуенно не это, ахуенно то что кто-то пользуется Д...
29.09.2017  Maxтам же: Спасибо, чувак! Это ахуенно, оно заработало!!!

Статсы