jQuery check width of a cell and compare against its col
<p>I have built a rather complicated bit of jQuery that does the following:</p>

<p>1.) Find all <code>&lt;col&gt;</code> and <code>&lt;td&gt;</code> that have a class of flex</p>

<p>2.) Stores the column width from a data value (this is because the width can be overided so therefore its stored in a HTML5 data attribute)</p>

<p>3.) Gets the width of a <code>&lt;td&gt;</code> (that has the class of flex) and uses it check against the column width. If its bigger than the original then make it 100% or make it the original width.</p>

<p>4.) This all runs every time the user moves the browser window</p>

<p>The problem I am having is that because their are multiple columns of flex or could only be just the one I am using a method of finding the cols and tds and then also storing their indexes as their is no direct relationship between a col and a td that can be tracked using either CSS or JS.</p>

<p>Here is the HTML:</p>

<pre><code>&lt;div class="uiGrid flex"&gt;
    &lt;table&gt;
        &lt;colgroup&gt;
            &lt;col class="flex" style="width:200px;" data-original="width:200px;" /&gt;
            &lt;col style="width:100px;" data-original="width:100px;" /&gt;
            &lt;col style="width:100px;" data-original="width:100px;" /&gt;
            &lt;col class="flex" style="width:250px;" data-original="width:250px;" /&gt;
            &lt;col style="width:100px;" data-original="width:100px;" /&gt;
        &lt;/colgroup&gt;
        &lt;thead&gt;
            &lt;tr&gt;
                &lt;th&gt;Header&lt;/th&gt;
                &lt;th&gt;Header&lt;/th&gt;
                &lt;th&gt;Header&lt;/th&gt;
                &lt;th&gt;Header&lt;/th&gt;
                &lt;th&gt;Header&lt;/th&gt;
            &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
            &lt;td class="flex"&gt;Cell&lt;/td&gt;
            &lt;td&gt;Cell&lt;/td&gt;
            &lt;td&gt;Cell&lt;/td&gt;
            &lt;td class="flex"&gt;Cell&lt;/td&gt;
            &lt;td&gt;Cell&lt;/td&gt;
        &lt;/tbody&gt;
    &lt;/table&gt;
&lt;/div&gt;
</code></pre>

<p>and here is the JS I have:</p>

<pre><code>var columnWidth,columnIndex,cellWidth,cellIndex,columnData,thiscolumnWidth;

uiGrid = {

    getOriginal: function () {

        /* Check if the grid is flexible */
        if ($('.uiGrid.flex').length &gt; 0) {

            columnData = new Array();
            // For each flex column
            $('.uiGrid table col.flex').each(function (i) {

                // Get its original width and strip out extra bits of css
                columnWidth = $(this).data('original');
                columnWidth = columnWidth.replace('width:', '');
                columnWidth = columnWidth.replace('px', '');
                columnWidth = columnWidth.replace(';', '');

                // Get its index
                columnIndex = $(this).index();

                // Creates an array of columnData with an array of data
                columnData[i] = new Array(columnWidth, columnIndex);
            });
        }
    },

checkWidth: function () {

        cellIndex = new Array();

        cellWidth = new Array();

        // For each flex cell in the first row
        $('.uiGrid table tr:first-child td.flex').each(function (i) {

            // Get its current width
            cellWidth[i] = $(this).width();

            cellIndex[i] = $(this).index();

            // For each columnData array
            $(columnData).each(function () {
                // If this columnData array second value matches the cellIndex
                //console.log('this' + this[1]);
                //console.log('cell' + cellIndex[i]);
                if (this[1] == cellIndex[i]) {
                    // thiscolumnWidth takes this columnData array first value as its value
                    thiscolumnWidth = this[0];
                }
            });

            // For each cellWidth array
            $(cellWidth).each(function () {
                console.log(this);
                                // If the cellWidth is less than the passed down column width
            if (this &lt; thiscolumnWidth) {
                // Apply the original width to a col with an index that matches the cell index  
                $('col.flex:eq(' + cellIndex[i] + ')').css('width', thiscolumnWidth);
                $('td.flex:eq(' + cellIndex[i] + ')').css('background-color', '#ff0000');
            }
            else {
                // Apply a flexible width to a col with an index that matches the cell index
                $('col.flex:eq(' + cellIndex[i] + ')').css('width', '100%');
                $('td.flex:eq(' + cellIndex[i] + ')').css('background-color', '#ff0000');
            }

            });

        });
    }
};

$(document).ready(function () {
    uiGrid.getOriginal();
    uiGrid.checkWidth();
    $(window).resize(function () {
        uiGrid.checkWidth();
    });
});
</code></pre>

<p>So the problem is that it doesn't work properly! The first TD with flex does work but not the second one? So it's as though it's getting confused with the numbering somewhere.</p>

<p>Their are no errors (NOTE: I had this working in a previous example but have since changed it to work with classes of flex so I know the theory definitely works)</p>

<p>Can anyone see any glaring problems or be able to test it out and see if they can figure it out.</p>

<p><strong>EDIT: Rather interestingly I have added two new lines to add a red background to the relative TDs to the columns that should be changing and they are way off! BUT it does color two cells but both in different columns and different rows so its definitely the counting that is the issue!</strong></p>

<p>EDIT2: I've created a fiddle for it <a href="http://jsfiddle.net/mFxCy/" rel="nofollow">http://jsfiddle.net/mFxCy/</a></p>
