CODEWITHSUNDEEP
javascriptjquery
Georg Leber
Georg Leber

Reputation: 3590

Compare string loaded with jquery

I folks, I have following javascript function, which should check for the index of a column in a table. The problem is the comparison of the columnName and the name from the table. I have tested with columnName 'ID' and this column is found in the table, but the comparison is not true, so that the index is not returned.

My code:

function getColumnIndex(columnName, grid) {
    console.log("loading column index for column: [" + columnName + "]");
    $('div.hDivBox > table > thead > tr > th', grid).each(function(index) {
         var name = $(this).attr('title');
         console.log("Checking cell: [" + name + "]");
         if (String(name) == columnName) {
              return index;
         }
    });
    console.log("no cell found with name: " + columnName);
    return -1;
}

The log statements:

loading column index for column: [ID]
Checking cell: [ID]
Checking cell: [Name]
Checking cell: [Description]
Checking cell: [AddTime]
Checking cell: [UpdTime]
no cell found with name: ID

An example of the HTML, which is analyzed by the javascript function:

<div class="hDivBox">
<table cellspacing="0" cellpadding="0">
    <thead>
        <tr>
            <th align="center" hidden="" axis="col0" title="ID" style="display: none;">
                <div style="text-align: center; width: 30px;">ID</div>
            </th>
            <th align="center" axis="col1" title="Name" class="">
                <div style="text-align: center; width: 250px;">Name</div>
            </th>
            <th align="center" axis="col2" title="Description" class="">
                <div style="text-align: center; width: 250px;">Beschreibung</div>
            </th>
            <th align="center" axis="col3" title="AddTime">
                <div style="text-align: center; width: 120px;">hinzugefügt</div>
            </th>
            <th align="center" axis="col4" title="UpdTime">
                <div style="text-align: center; width: 120px;">aktualisiert</div>
            </th>
        </tr>
    </thead>
</table>

Upvotes: 0

Views: 156

Answers (4)

Bergi
Bergi

Reputation: 665555

You are using .each() with a function

.each(function(){
    ...
    return index;
});
return -1;

This will return from the callback (and maybe stop the each-loop if index was false), but never break out and return from the outer getColumnIndex function! So, that one will always return -1.

Quick fix:

function getColumnIndex(columnTitle, grid) {
    var index = -1;
    $('div.hDivBox > table > thead > tr:first > th', grid).each(function(i) {
        if ($(this).attr('title') == columnTitle) {
            index = i;
            return false; // break each-loop
        }
    });
    return index;
}

Upvotes: 1

Torsten Walter
Torsten Walter

Reputation: 5802

You are returning from the inner function which is called in the each iteration. You need to save the index outside of the each call to access it afterwards.

function getColumnIndex(columnName, grid) {
    var columnIndex;
    console.log("loading column index for column: [" + columnName + "]");
    $('div.hDivBox > table > thead > tr > th', grid).each(function(index) {
         var name = $(this).attr('title');
         console.log("Checking cell: [" + name + "]");
         if (String(name) == columnName) {
              columnIndex = index;
              // return false to exit the each iteration early
              return false;
         }
    });

    if (typeof columnIndex !== "undefined") {
        return columnIndex;
    };

    console.log("no cell found with name: " + columnName);
    return -1;
}

Upvotes: 1

Anthony Grist
Anthony Grist

Reputation: 38345

The return statement inside the anonymous function passed to the .each() jQuery function only returns from that function, it won't also return from the getColumnIndex() function.

Instead, I'd do the following: 

function getColumnIndex(columnName, grid) {
    console.log("loading column index for column: [" + columnName + "]");
    var index = -1;
    $('div.hDivBox > table > thead > tr > th', grid).each(function(i) {
        var name = $(this).attr('title');
        console.log("Checking cell: [" + name + "]");
        if (String(name) == columnName) {
            index = i;
            return;
        }
    });
    if(index == -1)
        console.log("no cell found with name: " + columnName);
    return index;
}

The basic principle is that, rather than returning the index from the anonymous function, you're simply storing the correct index in a variable that's scoped outside of it, so you have access to it after the .each() call has finished executing.

Upvotes: 4

epascarello
epascarello

Reputation: 207557

Just use a jQuery attribute selector to match the title and use index() instead of looping yourself.

function getIndexByTitle( title ) {
 return $('th[title="' + title + '"]').index();
}

alert(getIndexByTitle("ID"));
alert(getIndexByTitle("Name"));

Example

Upvotes: 2

Related Questions