views:

137

answers:

2

I've got a table full of events, and I'm trying to get the number of events which are on at each hour. So that it is easy to see the number of concurrent events.

To do this, I'm running through the table looking for the event divs (which sit inside td), and then get the start and duration, and put that into a seperate div, adding them up as I go so I'll end up with '9:00, 5 events', 10:00, 3 events...

So far, I think the code is looking pretty good, but I've got a strange issue. I'm passing in a index so I know which cell is being counted. The first alert returns the index number. However, the second alert returns [object HTMLDivELEMENT], and I don't know why this is. I think everything would work fine if I could get the index after the .each function.

The code is this (simplified a bit for easier understanding)

for(sched=1;sched<8;sched++){
alert(sched);
jQuery('div.event', 'table#events td:nth-child('+sched+')').each(function(sched){
    var start=jQuery(this).data('start');
    var duration=jQuery(this).data('dur');
    var eventId=jQuery(this).attr('id');
    alert(sched);
    for(t=0;t<=duration;t++){
    var thisHour=start+t;

    var numEvents=jQuery('li#hour'+thisHour, 'table#events td.dailyTotals:nth-child('+sched+')').data('count');
    if(numEvents==null){

    numEvents=0;
    }
    numEventsf++;
    jQuery('li#hour'+thisHour, 'table#events td.dailyTotals:nth-child('+sched+')').css('background-color','red');

    jQuery('li#hour'+thisHour,'table#events td.dailyTotals:nth-child('+sched+')').data('count', numEvents);
    jQuery('li#hour'+thisHour,'table#events td.dailyTotals:nth-child('+sched+')').text(numEvents);
    }
    });
}
A: 

When the 2nd alert() executes, the name 'sched' points to the current element in the $.each() iteration, since your callback (sent to $.each) declared the sched parameter.

** EDITED **

This simplified example does what I think you're looking for...

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
</head>
<body>

<ul id="monkey">
  <li><span>xxx</span></li>
  <li><span>yyy</span></li>
  <li><span>zzz</span></li>
</ul>

<script type="text/javascript" charset="utf-8">

for(thisIsANumber=1; thisIsANumber < 4; thisIsANumber++){
    alert(thisIsANumber);
    $("span", $("#monkey li:nth-child(" + thisIsANumber + ")")).each(function(thisIsAnHtmlElement) {
        alert(thisIsANumber);
    });
}
</script>
</body>

</html>

I think the crux of the issue here is this: you're not in charge of the parameter that gets passed to the callback function. You can't choose that to pass -- that's done by jQuery, and it passed the DOM element at the current position of the $.each() loop.

You can, however, reference the original 'sched' variable that's defined outside your $.each() callback and managed by the for-loop.

Drew Wills
Thanks drew, I thought it was something like that. but how do you get around this? I've tried adding a var sched2=sched, and passing that in the .each(function(sched2), but that didn't work.
pedalpete
To me it doesn't look as though you're using the callback parameter at all. In other words, every time you reference 'sched' you simply want the numeric index -- is this accurate? If so, just change to .each(function(someNameYouDontUse) {...}), or (probably works) just drop the parameter entirely.
Drew Wills
I am using the parameter, it defines which column gets updated and which columns the events belong to. I've tried using a different name (which is what I was alluding to with sched2), but that still returns an object.
pedalpete
Not sure why you lost a point when I tried to add another. Now I understand though. I do find it strange that I don't pass the parameter in the function, but that jQuery can use it anyway. That's I guess what was tripping me up.
pedalpete
A: 

I suggest you take a look at the jquery documentation for the $.each function. http://docs.jquery.com/Utilities/jQuery.each . $.each() supports the ability to pass in a function with one parameter for just a value itself or two parameters, one for index and one for value. Remember all parameters defined in the function passed into $.each() are used by jquery exclusively if you want to use a variable defined outside the scope of the function passed into $.each() then you need to make sure the name of the variable doesn't collide with any named parameter or variable inside the function passed into $.each().

avelis
Maybe I'm not understanding correctly. I've looked through the documentation, and I'm not seeing anything that relates to this kind of issue. As you can see from my code above, I am passing a single parameter of sched. As far as I can tell, that is being passed into the function and the name definately does not collide with anything else passed into each. I've also tried re-naming sched to sched2, and passing sched2 into each, but I get the same result.
pedalpete
You _can't_ pass a parameter, you can only accept the parameter(s) that jQuery is willing to send you. See my edited answer.
Drew Wills