element.firstChild возвращает' <TextNode …' вместо Объекта в FF
Я записал систему вкладки с помощью некоторого очень простого JavaScript, и он работает как чемпион в IE 8, но, в FireFox 3 я подхожу короткий. pertitent HTML следующие:
<div id="tabs">
<ul class="tabs">
<li class="current"><a><span>News</span></a></li>
<li><a><span>Videos</span></a></li>
<li><a><span>Photos</span></a></li>
<li><a><span>Twitter</span></a></li>
</ul>
</div>
Затем на загрузке страницы в меня заскакивают этот метод:
function processTabs(TabContainer, PageContainer, Index) {
var tabContainer = document.getElementById(TabContainer);
var tabs = tabContainer.firstChild;
var tab = tabs.firstChild;
var i = 0;
.... more code }
Остальная часть кода не имеет значения в этой точке, потому что это никогда не называют. tabContainer установлен правильно сослаться на отделение с вкладками ID. Теперь, в Internet Explorer, когда я называю tabContainer.firstChild, переменные 'вкладки' ссылаются на мою УЛ. и затем вкладку var вызова = tabs.firstChild; ссылается на мой первый LI. Проблема состоит в том, что, когда я звоню, tabContainer.firstChild Venkman говорит мне, что возвращается. Таким образом, Firefox читает мои новые строки как фактических детей в отделении! Моя УЛ. является на самом деле вторым ребенком в childNodes наборе!
Там какой-либо путь состоит в том, чтобы зафиксировать это?
Спасибо!
3 ответа
Вы должны пропустить TextNodes, вам поможет простая функция:
function getFirstChild(el){
var firstChild = el.firstChild;
while(firstChild != null && firstChild.nodeType == 3){ // skip TextNodes
firstChild = firstChild.nextSibling;
}
return firstChild;
}
Использование:
var tabContainer = document.getElementById(TabContainer);
var tabs = getFirstChild(tabContainer);
Я бы рекомендовал всем, кто пытается работать с DOM в javascript, использовать библиотеку вроде jquery. Это значительно облегчит вам жизнь.
Затем вы можете переписать функцию JS следующим образом:
function processTabs(TabContainer, PageContainer, Index) {
var tabContainer = document.getElementById(TabContainer);
// jquery used to find all the <li> elements
var tabs = $(tabContainer).filter('li');
// use the jquery get( index ) function to retrieve the first tab
var tab = tabs.get(0);
var i = 0;
.... more code
}
Вы можете использовать node.firstElementChild , чтобы игнорировать начальный текст, или используйте библиотеку, такую как jQuery, которая позаботится об этом.