In the book for Jquery in chapter 4 about the colorbox plugin on page 98 they have an example of colorbox where it puts images in all anchor elements in the table’s tbody based on anchors having the rel attribute in the html file like so …
<a rel=‘celeb’ href = …/a>
I used this example as a basis for putting a table of tesla coil images into the color box and the code works.
Suddenly it occured to me that I might not need to specify this attribute over and over in each anchor for every row in the tbody, but could execute the line below below as the first line in the document ready event instead …
$(‘#teslaTable tbody a’).attr(‘rel’,‘teslapic’);
The code works as expected, and I found that I did not have to specify the tr td but could simply jump from tbody to a.
I am wondering if there is some hidden gotcha in doing it this way instead of the way the book says to do it.
Anyone know?
Thanks.
Basically consider this in php
<?php
$megabyte = 1024;
$two_megabytes = $megabytes * 2;
?>
Now this is a little different than your example but it illustrates the same point, why calculate data that is never going to change. You always know that the size of two megabytes will be 2048, so why bother calculate it.
Now it’s affected a little more in your part because the browser will save a version of the page you’re displaying. So it stores your table so it can load faster. But what you’ve done is said here load this table and then do this operation on it. But you know the end result of the operation before it’s started. So you could have told the browser to store the table with the rel tags already. That way the browser(using javascript) will not have to go through and do the extra manipulation to the table.
Thank you kindly, This explains things exactly as I needed. 
Since the colorbox requires this rel declaration in the table, and since the value is static it now makes sense to place the static values there in each row and not calculate it over and over.
Thanks kindly!
I assume you mention this obnoxious effect first, because it is very important but I do not know what you are trying to say is happening that is obnoxious to the user. What does having this code DO when the user has the page cashed that causes this feeling of “Obnoxious”.
Kind of like someone who tells me I hate it when you do that but they don’t tell me what it is that I’m doing that they hate. 
The reason I did it this way was to avoid having to remember to put rel=‘teslapic’ in each new anchor element as this table is exclusively for pictures I want to have in the gallery but I’d be more than happy to have rel=‘teslapic’ in every anchor element in the table if I knew and could understand why its a better way to go.
first, you’re now generating static data after the load of hte page, which if the page was cached is a bit obnoxious. Especially since javascript is at the end of hte page and who knows what other js libs you got downloading.
$(‘#teslaTable tbody a’).attr(‘rel’,‘teslapic’);
As you probably know by now what you’re saying is every thing with an id testaTable, which should only be one specific table. Then get the tbody for that table and all a’s in that table. The gotcha really wouldn’t apply to this example, you just skipped a dom eleminate in your definition, what you would worry about is that there was an anchor tag that you didn’t want to change the attribute too.
<div id="testaTable">
<ul>
<li><a href="#">list data</li>
<li><a href="#">list data</li>
<li>Sub header
<ol>
<li><a href="#">Sub list data</a></li>
</ol>
</li>
</ul>
</div>
Not the greatest code but imagine you do $(‘#testaTable li a’).onclick(awesomeFunction);
It will apply to all li, thought you could’ve only ment to assign it ot the sub list data which would be $(‘#testaTable ol li’).onclick(awesomeFunction);
It’s sorta a way to go for an edge case, but no oyu don’t really ahve to worry about anything, and if you’re curious you do just open up firebug and console.log($(‘.ridicoulous:last .class:odd .tag:visible .lookup’, $(‘.this_is_stupid_complex’)));