Home/ Questions/Q 6109701
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T14:26:02+00:00

Here is my entire document: <!DOCTYPE html> <html> <head> <style type="text/css"> .highlighted { color:green;

  • 0

Here is my entire document:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
  .highlighted { color:green; font-weight:bold; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {


function itemHighlight(n) 
{
      $(function() {
        $("ul > li:eq("+n+")").addClass("highlighted"); 
      });
}

NumofLi = $('li').length;

for(i = 0; i < NumofLi; i++) {
    var timeoutvar = $("ul > li:eq("+i+")").attr('data-time');
    setTimeout("itemHighlight("+i+")", timeoutvar);
}


});

</script>

</head>
<body>
  <ul>
    <li data-time="4000">foo</li>
    <li data-time="5000">foo</li>
    <li data-time="9000">foo</li>
    <li data-time="11000">foo</li>
    <li data-time="15000">foo</li>
  </ul>
</body>
</html>

I would like the li’s to have the class "highlighted" added after their corresponding ‘data-time’ milliseconds.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try this:

    $(function(){
    $('li').map(function(){
        var _this = $(this);
        setTimeout(function(){
            _this.addClass('highlighted');
        },Number(_this.data('time')));
    });
});

    Working example: http://jsfiddle.net/AlienWebguy/dzAGn/2/

    • 0