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
27.06.2012 · 37 камментов · рейтинг 11.21
28.04.2008 · 44 каммента · рейтинг 9.34
23.01.2013 · 20 камментов · рейтинг 8.68
30.01.2013 · 13 камментов · рейтинг 7.01

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

19.04.2018  ИринаСвязной.Банк закрыл возможность пополнения WebMoney: Добрый день. Получите план раскрутки для вашего с...
12.04.2018  SlowpokeИщем PHP-программиста, Москва, 40.000: Вакансия еще актуальна? Хотел бы попробовать свои ...
16.02.2018  CrazyMiheyКак изменить оболочку (shell) по умолчанию для пользователя Linux: Ну и сколько Страждущих ломанулись подбирать Парол...
14.12.2017  БраузерНовый Яндекс.Браузер - браузер "Yandex" (отзыв / обзор): Я предпочитаю использовать яндекс браузер
18.11.2017  JohnКак закрыть окно Skype / свернуть нафиг в трэй: Спасибо, добрый человек! Неимоверно раздражало.

Статсы