jquery - Why is :first-child not working? -

jquery - Why is :first-child not working? -

why portion of jquery not working properly?

$(function() { if ($('#slide-01').is(":first-child")) { $('input:radio[id=target-slide-01]').prop('checked', true); } else { $('input:radio[id=target-slide-01]').prop('checked', false); } if ($('#slide-02').is(":first-child")) { $('input:radio[id=target-slide-02]').prop('checked', true); } else { $('input:radio[id=target-slide-02]').prop('checked', false); } if ($('#slide-03').is(":first-child")) { $('input:radio[id=target-slide-03]').prop('checked', true); } else { $('input:radio[id=target-slide-03]').prop('checked', false); } if ($('#slide-04').is(":first-child")) { $('input:radio[id=target-slide-04]').prop('checked', true); } else { $('input:radio[id=target-slide-04]').prop('checked', false); } });

the link jquery beingness implemented located on jsfiddle.

when inspect elements within html , css, each slide has ':first-child' (as slides rotate), guess jquery not recognizing rotation or jquery off somewhere.

i have tried using :first in place of :first-child, not create difference.

the function radiobuttons get's called 1 time on page loading since it's anonymous self invoking function. if give name

function updateradiobuttons() { if ($('#slide-01').is(":first-child")) { $('input:radio[id=target-slide-01]').prop('checked', true); } else { $('input:radio[id=target-slide-01]').prop('checked', false); } if ($('#slide-02').is(":first-child")) { $('input:radio[id=target-slide-02]').prop('checked', true); } else { $('input:radio[id=target-slide-02]').prop('checked', false); } if ($('#slide-03').is(":first-child")) { $('input:radio[id=target-slide-03]').prop('checked', true); } else { $('input:radio[id=target-slide-03]').prop('checked', false); } if ($('#slide-04').is(":first-child")) { $('input:radio[id=target-slide-04]').prop('checked', true); } else { $('input:radio[id=target-slide-04]').prop('checked', false); } }

you can phone call when slides got changed

function moveleft() { $('#myslider ul').animate({ left: +containerwidth }, 600, function () { $('#myslider ul > li:last-child').insertbefore('#myslider ul > li:first-child'); $(this).css('left', ''); updateradiobuttons(); }); } function moveright() { $('#myslider ul').animate({ left: -containerwidth }, 600, function () { $('#myslider ul > li:first-child').insertafter('#myslider ul > li:last-child'); $(this).css('left', ''); updateradiobuttons(); }); }

and on page loading

$(function() { // key animation. updateradiobuttons(); var mytimer = setinterval(function () { moveright(); }, 5000);

jquery html css radio-button css-selectors