String comparison in JQuery?

Question

I am working on JQuery mentioned below

jQuery("select[name='hideLineItemColumns_quote'] option:selected").each(function () {

    var columnName = $.trim($(this).text());


    $('thead.line-item-grid-header tr th').filter(function () {

        return $.trim($('div', this).text()) == columnName;
    }).hide();

});

So based on the selected option of the Select tag, Jquery will hide respective columns in a table. Everything is working fine except one scenario, when columnName = "List Price" it doesn't work. If I specifically mention "List Price" in

return $.trim($('div', this).text()) == "List Price";

it works fine. Is there anything I am missing?

Below is the html for select dropdown

<select name="hideLineItemColumns_quote" multiple="true" style="width:100%;" size="4" class="form-input ">
<option value="__part_desc">Description</option>
<option value="__part_number">Product</option>
<option value="_costEa_line">Cost</option>
<option value="_listPriceEach_line">List&nbsp;Price</option>
</select>

and below is code for thead

<thead class="line-item-grid-header">
    <tr>
        <th align="center" class="list-label ">
            <div style="overflow:hidden;width:60px;">List Price</div>
        </th>
    </tr>
</thead>

it looks like instead of space it showing   in firebug, any workaround ?

Thanks, Nitesh

Answer 1

The non-breaking space (U+00A0 Unicode, 160 decimal,  ) is not the same as the space character (U+0020 Unicode, 32 decimal). Well, both of them seems to be a "space", but they are absolutely different characters.

One possible workaround is that for the time of checking you convert non-breaking spaces into simple spaces:

$.trim($('div', this).text()) == columnName.replace(/\u00A0/g, ' ')

jsFiddle Demo