Задать вопрос
@1nd1go
javascript

Формирования CSS-селектора для конкретного элемента DOM'а

Приветствую,

Видел ли кто JS скрипт, jquery плагин или просто может кто алгоритм подсказать для получения CSS селектора для конкретного элемента DOM-дерева страницы.

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

<body>
  <div id="container">
    <ul id="menu"> ... </ul>
    <div id="comments">
      <ul>
        <li>Первый нах</li>
      </ul>
    </div>
  </div>
</body>


И вот я хочу получить CSS селектор к коменту «Первый нах».

В простейшем случае можно иметь: 
body div#container div#comments ul:nth-child(0) li:nth-child(0)


В лучшем случае, что-то более оптимизированное: 
#comments li:nth-child(0)


Спасибо!
  • Вопрос задан
  • 3525 просмотров
1 комментарий
Подписаться 2 Оценить 1 комментарий
Пригласить эксперта
Ответы на вопрос 2
@yopopt
Ваш вариант не далёк от истины, но я бы сделал как-то так:

$(document).one('click', function(event) {
  var q = function (i, e) {
    if(e.tagName.toLowerCase() !== 'body') {
      if((!$(arr[0]).attr('id') && e.id) || $(e).length > 1 || i == -1)
        arr.push( 
          (e.id && "#"+e.id)
          || (e.className && e.tagName.toLowerCase()+"."+e.className) 
          || (e.tagName.toLowerCase() + ":eq(" + $(e).index() + ")")
        );
      if(e.id)
        return false;
    }
    else
      return false;
  }
  var arr = [];
  q(-1,event.target);
  $(event.target).parents().each(q);
  console.log(arr.reverse().join(' '));
});


Выдаёт максимально оптимизированный результат.
Ответ написан
Комментировать
Комментировать
@1nd1go Автор вопроса
Сам написал пока что-то вроде:

$(document).one('click', function(event) {
  var i=100, arr = [], current = $(event.target);
  
  while(i-- > 0  && current[0].nodeName.toLowerCase() !== 'body') {
    arr.push( 
      (current.attr('id') && "#"+current.attr('id')) 
      || (current.attr('class') && current[0].nodeName.toLowerCase() +"."+current.attr('class')) 
      || (current[0].nodeName.toLowerCase() + ":eq(" + current.index() + ")"));
    current = current.parent();    
  }

  console.log(arr.reverse().join(' '));
});
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработка бота рассылок в Telegram
25 нояб. 2024, в 10:16
7000 руб./за проект
Разработать бота-краулера для парса всех каналов в телеграм в бд MySQL
25 нояб. 2024, в 09:53
14000 руб./за проект
Изменить код STM32 и конфигурацию сервиса удаленного доступа
25 нояб. 2024, в 08:57
5000 руб./за проект
Ещё заказы