Не может выбрать детей элемента HTML5 в IE8 с селектором jQuery
Я нашел некоторые сообщения с подобными проблемами, но это - что-то другое. Я обновил от jQuery 1.4 до 1.4.2 после того, как я читал другое сообщение, но проблема все еще представляет себя. Я также попробовал рабочий IE 8 в режиме эмуляции, и ничто, казалось, не работало. Конечно, это работает отлично в Chrome.
Вот разметка:
<section class="pleaseWaitButton">
<p><img src="images/please_wait.png" alt="Please wait" /></p>
<p><input type="image" src="images/add_to_cart.png" alt="Add to cart"/></p>
</section>
Вот единственный селектор jQuery, который действительно работает в этом сценарии...
$('.pleaseWaitButton').length // 1
И вот селекторы jQuery, которые не будут работать!
$('.pleaseWaitButton').find('input').length // 0
$('.pleaseWaitButton input').length // 0
$('.pleaseWaitButton > p > input').length // 0
Какие-либо идеи? Кто-либо...?
2 ответа
Internet Explorer 8 имеет необычную поддержку HTML 5, IE6 и IE7, просто не поддерживают его.
Вам необходимо добавить элементы HTML 5 , чтобы стилизовать и правильно использовать для них такие методы / свойства, как innerHTML, getElementsByTagName.
Это будет работать в IE6-IE8:
<!doctype html>
<html>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<section class="pleaseWaitButton">
<p><img src="images/please_wait.png" alt="Please wait" /></p>
<p><input type="image" src="images/add_to_cart.png" alt="Add to cart"/></p>
</section>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script>
alert( $('.pleaseWaitButton').find('input').length )
alert( $('.pleaseWaitButton input').length )
alert( $('.pleaseWaitButton > p > input').length )
</script>
</html>
Живая демонстрация: http://medero.org/html5.html
- это элемент HTML5, не поддерживаемый в IE8, у вас возникнут проблемы используя его как элемент, включая поиск дочерних элементов под ним. Это не проблема jQuery, это основная проблема DOM, вот демонстрация :
Все, что я делаю, это даю элементу идентификатор, чтобы упростить задачу:
<section class="pleaseWaitButton" id="btn">
Затем попробуйте получить его children:
document.getElementById('btn').children.length
Это дает вам 2 в браузерах HTML5 и 0 в IE.