I've been working on debugging some jQuery on a BlackBerry OS5 device (the 8530). There are a number of problems, but one that I have narrowed down is related to jQuery's .each()
The logic is as such:
$objectArray.each(function(){
alert('test');
if(...some logic...){
$(this).addClass('testClass');
};
})
In any normal browser I get the alert, click OK, and then see that particular item (in this case, a TD) get an updated class if the logic statement is true. It then repeats through the rest of the items, each getting an alert, me OKing it, and me seeing that particular TD's class get updated.
On the BlackBery 8530, however, I get each alert but the TDs aren't updated one-by-one. Instead, they all get updated at once after the last alert based on the if logic of the last TD only.
Odds are that there are serious JS issues with this particular browser, but I'm wondering if there is a way to get around this. Are there alternatives to using .each()
in jQuery?
UPDATE:
A more detailed code example:
$TRs.each(function(){
var $TR = $(this);
var $checkBoxTD = $TR.find('td.td3');
var $checkBox = $checkBoxTD.find('input');
alert($checkBox.is(':checked'));
if ($checkBox.is(':checked')!=true){
$checkBoxTD.addClass('notSelected');
}
});
I'm looping through each TR of a TABLE. Within each TR is a TD (.td3) that contains a checkbox. I need to check each one. If it's not checked, I need to add a class to the TD.
In good browsers, the alert will show a true or false, and, based on that particular alert, you will see the class being applied appropriately to that row as you dismiss the alert. It then repeats for every row.
In BB OS5's browser, each alert pops up with the proper value, but the classes aren't updated until AFTER the very last alert/loop, so every TD class then used the logic of the last loop only.
UPDATE 2 (fix?):
Thanks to Alex, I did some more playing with this and found a way to get this to work in the stubborn browser.
$TRs.each(function(idx){
var $TR = $(this);
var $checkBoxTD = $TR.find('td.td3');
var $checkBox = $checkBoxTD.find('input');
alert($checkBox.is(':checked'));
if ($checkBox.is(':checked')!=true){
$TRs.eq(idx).find('td.td3').addClass('notSelected'); // <-- the 'fix'
}
});
The difference is that I'm going back to the main jQuery object $TRs and specifically grabbing one of the elements from it based on its index.
So based on that, my final question is: Does the above solution have any downsides for the 'good' browsers? Is there a performance hit?
Try this:
UPDATE:
Try this, maybe it has less overhead...