Получить селектор CSS элемента (когда у него нет идентификатора)

Если у Вас будет много хранимых процедур, Вы найдете связь себя с одной базой данных - некоторые из них не могут легко быть переданы.

Связь себя к одной базе данных не является хорошим дизайном.

, Кроме того, если у Вас есть бизнес-логика на базе данных и в бизнес-слое тогда, обслуживание становится проблемой.

29
задан Dan Dascalescu 26 August 2015 в 05:04
поделиться

4 ответа

Я обнаружил, что мог бы на самом деле использовать этот код из источника chrome devtools , чтобы решить эту проблему, без такого большого количества модификаций.

После добавления соответствующих методов из WebInspector.DOMPresentationUtils в новое пространство имен и исправления некоторых различий, я просто называю это так:

> UTILS.cssPath(node)

Пример реализации см. css_path.js

18
ответ дан 28 November 2019 в 00:44
поделиться

Проверьте эту библиотеку генератора селекторов CSS @ medv / finder

  • Генерирует кратчайшие селекторы
  • Уникальные селекторы на странице
  • Стабильный и надежный селекторы
  • 2,9 кБ gzip и уменьшенный размер

Пример сгенерированного селектора:

.blog > article:nth-child(3) .add-comment
3
ответ дан 28 November 2019 в 00:44
поделиться
function fullPath(el){
  var names = [];
  while (el.parentNode){
    if (el.id){
      names.unshift('#'+el.id);
      break;
    }else{
      if (el==el.ownerDocument.documentElement) names.unshift(el.tagName);
      else{
        for (var c=1,e=el;e.previousElementSibling;e=e.previousElementSibling,c++);
        names.unshift(el.tagName+":nth-child("+c+")");
      }
      el=el.parentNode;
    }
  }
  return names.join(" > ");
}

console.log(  fullPath( $('input')[0] ) );
// "#search > DIV:nth-child(1) > INPUT:nth-child(1)"

Похоже, это то, что вы просите , но вы можете понять, что это не гарантирует уникальной идентификации только одного элемента. (В приведенном выше примере все входные данные одного и того же брата также будут сопоставлены.)

Редактировать : изменен код для использования nth-child вместо классов CSS для правильного устранения неоднозначности для один ребенок.

55
ответ дан 28 November 2019 в 00:44
поделиться

вы можете использовать псевдо-классы css first-child, если элемент является первым дочерним элементом в таблице div или body..etc

вы можете использовать функцию jquery nth child ().

http://api.jquery.com/nth-child-selector/

пример из jquery.com

<!DOCTYPE html>
<html>
<head>
  <style>

  div { float:left; }
  span { color:blue; }
  </style>
  <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
  <div><ul>
    <li>John</li>
    <li>Karl</li>
    <li>Brandon</li>

  </ul></div>
  <div><ul>
    <li>Sam</li>
  </ul></div>

  <div><ul>
    <li>Glen</li>
    <li>Tane</li>
    <li>Ralph</li>

    <li>David</li>
  </ul></div>
<script>$("ul li:nth-child(2)").append("<span> - 2nd!</span>");</script>

</body>
</html>

мои 2 цента, если я правильно понял вопрос.

0
ответ дан 28 November 2019 в 00:44
поделиться
Другие вопросы по тегам:

Похожие вопросы: