querySelector с вложенным nth-child в Chrome не работает - PullRequest
10 голосов
/ 14 июня 2011

Я искал использование nth-child в селекторе nth-child, чтобы найти элемент.Это похоже на работу в Firefox, но, похоже, не работает на Chrome.Вот мой тестовый файл:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>untitled</title>
    <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <script type="text/javascript" charset="utf-8">
        myFunc = function() {
            if(document.querySelector('#wonderful DIV:nth-child(2) DIV:nth-child(2)')) {
                alert("found the element");
            } else {
                alert("element not found");
            }
        };
    </script>
</head>
<body onLoad="myFunc()">

    <div id="wonderful">
       <div>
       </div>
       <div >
           <div>
           </div>
           <div class="blue">
               find me!
           </div>
       </div>
    </div>

</body>
</html>

Кто-нибудь еще видел эту проблему?Есть решение, чтобы обойти это?

Ответы [ 2 ]

13 голосов
/ 14 июня 2011

Это сработало для меня в Chrome, но тогда не работает в FF.

document.querySelector('#wonderful div:nth-child(2):nth-child(2)')

Следующие фрагменты работают в обоих браузерах, но я предполагаю, что вы уже знаете, что

document.querySelector('#wonderful div:nth-child(2) div.blue')

Так что для меня это выглядит как сбой реализации в chrome.

2 голосов
/ 24 апреля 2019

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

const sel = '#wonderful div:nth-child(2) div:nth-child(2)';
console.log(document.querySelector(sel))
 <div id="wonderful">
    <div></div>
    <div>
       <div></div>
       <div class="blue">find me!</div>
    </div>
 </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...