Question

Is there any reason why this function beginning:

$(".inner").each(function() {

Would fail to process every div with the class inner in a page full of:

<div class="inner">

?

That is my main question. I’ve pretty much debugged for the last 24 hours and I’ve come to the conclusion that the jQuery function is not even processing at every place it should. This was my simple test:

$(function() {
    $(".inner").each(function() {
        var inner = $(this);
        var plusMore = $("<div>HELLO!!!</div>");
        plusMore.insertBefore($(inner));
    });
});

On identical code lines inside of a table, I only get this code to function (and view “HELLO!!!”) on a handful of the table rows. I just cannot understand it…

—-UPDATE FOR HTML/SMARTY—-

<td>
    {if $results[i].people}
        <div class="outer peoplecol"> 
            <div class="inner">
                {foreach from=$results[i].people item=people}
                    <div style="line-height:12px; margin-bottom:10px;">
                        {if $people.pending eq 0}
                            <a href="Editpeople.php?tid={$people.id}" title="People Details" style="text-decoration:none">
                        {/if}
                        {$people.firstName} {$people.lastName}
                        {if $people.pending eq 0}
                            </a>
                        {/if}
                    </div>
                {/foreach}
            </div>
        </div>
    {else}
        <div class="outer peoplecol">
            None
        </div>
    {/if} 
</td>

Also – I’m using jQuery TableSorter with this. I just tried disabling, and it worked, so it must be clashing with this…!

—UPDATE ADDING TABLE SORTER CODE—-

$(document).ready( function () {
    // TableSorter
    if ($("#dt-results").find("tbody").find("tr").size() > 0)
    {
        $("#dt-results") 
        .tablesorter({
                        widgets: ['zebra'], 
                        sortList: [[0,1]],
                        headers: { 
                            1: { 
                                sorter:'currency' 
                            }
                        },              
                        textExtraction: function(node) {
                            if ($(node.innerHTML).hasClass('outer') && $(node.innerHTML).hasClass('peoplecol')) {
                                if ($.trim($(node).text()) == 'None') {
                                    return 'z'; //so that none comes last
                                }
                            }
                            return $(node).text();
                        }
        })
        .tablesorterPager({container: $("#pager")})
        .tablesorterFilter({filterContainer: $("#filter-box"),
                      filterClearContainer: $("#filter-clear-button"),
                      filterCaseSensitive: false,
                      filterWaitTime: 10});
    }

});

Answer 1

The problem was related to the way jQuery tablesorter/Pager interacted with EMPTY cells in the table. It was causing some kind of issue with the rest of the jQuery on the page. I never did figure out why exactly it caused problems – but as long as I forced characters (non-white space characters), all has been performing well.