Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Получить уникальный селектор элемента (https://javascript.ru/forum/xhtml-html-css/53709-poluchit-unikalnyjj-selektor-ehlementa.html)

2chan 14.02.2015 21:16

Получить уникальный селектор элемента
 
Можно-ли получить уникальный селектор элемента? В "Инспектор" есть такая возможность через контекстное меню, но можно-ли это сделать в коде?

danik.js 14.02.2015 22:25

А что такое "уникальный селектор"? Понятно объясни, по какой схеме он формируется, приведи примеры.

Taipan 15.02.2015 15:36

Больше конкретики.

2chan 17.02.2015 01:33

Простите что так медленно. Только сейчас получилось зайти.

Taipan, danik.js,
Итак:
1) Если у элемента есть ID - возвращается "#elementID";
2) Если у элемента есть класс, который больше не используется на странице - возвращается класс ".class";
3) Если сочетание элементов больше не встречается, то оно и возвращается. Т.е. если "parenttag.class" больше нет на странице, то оно и будет возвращено.
4) Если ID нет у самого, но оно есть у родителя, то возвращается "#parentID > tag:nth-child(N)", где N - число дочернего элемента TAG в родителе с ID #parentID;
5) Если ID нет у родителя, то переходим к родителю родителя и т.д.;
6) Если в цепочке родителей нет ID или других уникальных селекторов (п.2), то доходит тега BODY отчисление идёт от него.

Т.е. будет примерно "body > tag1:nth-child(N) > tag2:nth-child(I) > tag3:nth-child(X) > neededtag:nth-child(5)", когда мы ищем neededtag, когда он ребёнок под номером 5 в tag3, который дочерний элемент под номером X в tag2, который дочерний элемент под номером I в tag1, который является N-ым дочерним элементом в BODY.

Пример. Мы хотим получить уникальный селектор элемента списка, в котором написано "this" в данном документе:
<body>
<ul>
<li>1</li>
<li>2</li>
</ul>
<ul>
<li>3</li>
<li>this</li>
<li>5</li>
</ul>
</body>

. После вызова функции из Инспектора мы получим "body > ul:nth-child(2) > li:nth-child(2)".
Если мы изменим документ так:
<body>
<ul>
<li>1</li>
<li>2</li>
</ul>
<ul>
<li>3</li>
<li id="elid">this</li>
<li>5</li>
</ul>
</body>

, то просто получим строку "#elid".

Я пробовал сам написать функцию, но, как мне кажется, должна быть встроенная, которая 100% будет быстрее самописной. Да и как получить номер дочернего элемента я не придумал…

ksa 17.02.2015 08:44

Цитата:

Сообщение от 2chan
Пример. Мы хотим получить уникальный селектор элемента списка, в котором написано "this" в данном документе:

Тут кагбэ нужно понять, что появилось раньше, курица или яйцо.

Ты пытаешся решить задачку в которой, тыкнув на некоем элементе, получить некий максимально "короткий" селектор, однозначно его определяющий...
Только зачем это? :)

danik.js 17.02.2015 14:33

Цитата:

Сообщение от 2chan
должна быть встроенная

Нету такой. Тем более алгоритм чуть ли не "от балды". Не будут такие непонятные алгоритмы добавлять в спецификацию и реализации.

Алгоритм ты уже написал, дело за малым - написать код ).
Или поищи в исходниках DeveloperTools.


Часовой пояс GMT +3, время: 02:59.