Почему этот селектор возвращает два элемента на этой странице в Chrome? - PullRequest
Новая
       0

Почему этот селектор возвращает два элемента на этой странице в Chrome?

0 голосов
/ 24 января 2012

Довольно просто. Я думаю, что у меня есть то, что должно быть уникальным селектором, но в Chrome он возвращает два <p> элемента. Страница, на которую я смотрю: 

http://docs.webfaction.com/user-guide/control_panel.html

и селектор: 

document.querySelectorAll('body:nth-child(2) div#container:nth-child(1) div#content.clear.hasCorners:nth-child(2) div.document:nth-child(3) div.documentwrapper:nth-child(1) div.bodywrapper:nth-child(1)  div.body:nth-child(1) div#the-control-panel.section:nth-child(1) p:nth-child(3)')

Должно быть, я что-то неправильно понимаю в селекторе nth-child, потому что думаю, что он гарантированно уникален.

РЕДАКТИРОВАТЬ: Ах, я определенно должен использовать некоторые дочерние селекторы (>) здесь, чтобы избежать перехода вниз по дереву DOM. Кто-нибудь может ответить на это, и я приму.

1 Ответ

0 голосов
/ 26 января 2012

Как отмечалось выше, проблема в том, что без дочернего селектора (>) нет никакой гарантии уникальности, потому что могут быть дополнительные совпадения ниже по дереву DOM.Например, рассмотрите эту разметку: 

<body>
  <div class="foo" id="bar">
    <div class="foo" id="baz"></div>
  </div>
</body>

, если вы попытаетесь: 

$('body:nth-child(1) .foo:nth-child(1)')

, которая вернет два элемента.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...