Compare string loaded with jquery

Question

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>

You don't need to cast String(name) as it's already a string. Also, be sure when you are talking about ID, name and title - they are all different attributes! — chrisfrancis27
– chrisfrancis27, Commented Aug 1, 2012 at 15:57
weird. Just in case, I'd try String(name) == String(columnName) though I doubt that'll change anything — Phillip Schmidt
– Phillip Schmidt, Commented Aug 1, 2012 at 16:00
possible duplicate of Javascript function fails to return element — Bergi
– Bergi, Commented Aug 1, 2012 at 16:07

Anthony Grist · Accepted Answer · 2012-08-01 16:00:30Z

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.

epascarello · Accepted Answer · 2012-08-01 16:00:02Z

2

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

answered Aug 1, 2012 at 16:00

epascarello

208k20 gold badges206 silver badges246 bronze badges

1 Comment

Georg Leber Over a year ago

Didn't know that function. Thanks for this smart solution ;)

Torsten Walter · Accepted Answer · 2012-08-01 16:04:11Z

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;
}

Bergi · Accepted Answer · 2012-08-01 16:08:27Z

1

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;
}

edited Aug 1, 2012 at 16:08

answered Aug 1, 2012 at 16:03

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Collectives™ on Stack Overflow

Compare string loaded with jquery

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related