Question

我只需要在我的网站中使用javascript。但我只知道javascript的基础知识。它很容易在jQuery中选择元素，因为它类似于CSS选择器。但我以前从未在javascript中完成过。

这是我需要转换为javascript的jQuery代码。

$('ul#goto li:eq(1) a').css("color","white");
$('ul#goto li:not(:eq(1)) a').css("color","grey");

我不知道如何实现这一目标。任何人都可以帮我解决这个问题吗？

HTML code：

<ul id="goto">
<li><a href="javascript:sliders[0].goTo(0)">.</a></li>
<li><a href="javascript:sliders[0].goTo(1)">.</a></li>
<li><a href="javascript:sliders[0].goTo(2)">.</a></li>
<li><a href="javascript:sliders[0].goTo(3)">.</a></li>
<li><a href="javascript:sliders[0].goTo(4)">.</a></li>
</ul>

if(condition)
$('ul#goto li:eq(1) a').css("color","white");
$('ul#goto li:not(:eq(1)) a').css("color","grey");
else
$('ul#goto li:eq(2) a').css("color","white");
$('ul#goto li:not(:eq(2)) a').css("color","grey");

Answer 1

$('ul#goto li:eq(1) a').css("color","white");
$('ul#goto li:not(:eq(1)) a').css("color","grey");

可以替换为：

document.getElementById('goto').children[1].children[0].style.color = "white";

var lis = document.getElementById('goto').children;
for( var i=0; i<lis.length; i++) {
    if (i==1) continue;
    lis[i].children[0].style.color = "grey";
}

Answer 2

试试这个，

var li = document.getElementById('goto').getElementsByTagName('li');
for(var i=0; i<li.length; i++){
    if(i==1){
        li[i].children[0].style.color = 'white';
    }else{
        li[i].children[0].style.color = 'grey';
    }
}

<强>更新

在IE中，上面的代码对我有用。我不确定为什么它不适合你。

无论如何尝试下面的代码，

var li = document.getElementById('goto').getElementsByTagName('li');
for(var i=0; i<li.length; i++){
    if(i==1){
        li[i].getElementsByTagName('a')[0].style.color = 'white';
    }else{
        li[i].getElementsByTagName('a')[0].style.color = 'grey';
    }
}

演示： http://jsfiddle.net/CsLXk/3/

Answer 3

试试

 document.getElementById('mydiv').style.color = 'white';

如何将这个jQuery代码转换为javascript代码？

3 个答案: