How to convert this jQuery code into javascript code?

Question

I need to use only javascript in my site. But I know only basics of javascript. Its damn easy to select elements in jQuery as it is similar to CSS selectors. But I've never done in javascript before.

This is the jQuery code which I need to convert into javascript.

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

I don't know how to achieve this. Can anyone help me out on this?

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");

post your html code and give us the clue what to do with that — polin
– polin, Commented Nov 19, 2012 at 5:38
Why you need it? If it is learning purpose, just have a look at jQuery library code. — Mohammed H
– Mohammed H, Commented Nov 19, 2012 at 5:48

nbrooks · Accepted Answer · 2012-11-19 06:04:39Z

2

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

Can be replaced by:

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";
}

edited Nov 19, 2012 at 6:04

answered Nov 19, 2012 at 5:46

nbrooks

18.2k5 gold badges58 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

designosis Over a year ago

would it be more efficient to style all as grey, then only replace the 1st with white?

nbrooks Over a year ago

@neokio Indeed it should, just a typo :P Thanks

mowwwalker Over a year ago

IE8 includes comment nodes as children. jsbin.com/ofuwub/1/edit, quirksmode.org/dom/w3c_core.html#t71

nbrooks Over a year ago

@Walkerneo No, the child node there is the <br>, not the comment node...Edit, oops was testing in Chrome, I'll take your word for it I don't have IE :)

mowwwalker Over a year ago

@nbrooks, I'm talking specifically about IE8 though.

|

Muthu Kumaran · Accepted Answer · 2012-11-19 06:57:28Z

2

Try this,

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';
    }
}

UPDATE:

In IE, the above code worked for me. I'm not sure why it's not working for you.

Anyway try the below code,

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';
    }
}

Demo: http://jsfiddle.net/CsLXk/3/

edited Nov 19, 2012 at 6:57

answered Nov 19, 2012 at 5:56

Muthu Kumaran

18k5 gold badges50 silver badges72 bronze badges

1 Comment

vignesh Over a year ago

But sadly this doesn't work in IE! But @nbrooks code works in both!

Akhilraj N S · Accepted Answer · 2012-11-19 05:39:37Z

0

just try

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

answered Nov 19, 2012 at 5:39

Akhilraj N S

9,5475 gold badges38 silver badges44 bronze badges

2 Comments

vignesh Over a year ago

I don't want to select div. I need to know how to select the <a> inside <li>

Akhilraj N S Over a year ago

try to add id to the <a> tag

Collectives™ on Stack Overflow

How to convert this jQuery code into javascript code?

3 Answers 3

6 Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related