@1nd1go

Формирования 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)


Спасибо!
  • Вопрос задан
  • 3523 просмотра
Пригласить эксперта
Ответы на вопрос 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(' '));
});
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы