jQuery gt(0) selector issue

Question

Hi all.

I have a problem with my jQuery selector. See below results from firebug js debugger:

$("#tblComponentData tr:not([disabled=disabled])").length          9
$("#tblComponentData tr:not([disabled=disabled]):gt(0)").length    5

As you can see there is only 1 difference between these selectors: the second selector has "gt(0)". But number of elements from the second selector is 5 but from the first one is 9.

If I use IE I have valid results (the second selector gives 8 elements). So, I cannot understand why it is possible. I use jquery-1.3.2 Could you please try to help me with this?

My HTML markup is pretty simple. See an example of the table below:

<table id="tblComponentData" class="componentConfigurationTable">
<tr style="cursor: auto; background-color: #ffffff; color: #000000">
    <td style="width: 20%">
        <b>First column</b>
    </td>
    <td style="width: 15%">
        <b>Second Column</b>
    </td>
    <td style="width: 30%">
        <b>Third Column</b>
    </td>
    <td style="width: 350px">
        <b>Fourth Column</b>
    </td>
</tr>   
<tr id='665' class='even'
    type='dropdown' order='2' >     
    <td>First value</td>
    <td>Second value</td>
    <td>Third value</td>
    <td style="width: 350px">
        <span class="special">
            </span>&nbsp<span class="error">Test warning</span></td>
</tr>
    etc........

Some rows in the table are disabled (marked by attribute [disabled=disabled]). The purpose of my selector is to bind click handler on elements which are not disabled.

Rows can be enabled dynamically by javascript. Therefore I have to unbind click handler from all rows in the table and then use my selector and bind handler again. So, my selector runs many times. First couple of times it selects correct rows, but on third time it selects only elements which have been selected in previous time. This behavior looks like jQuery caches selector, but as far as I know it never do it.

Also, this issue occurs in all browsers except IE (I tested it on Firefox, Chrome, Safari and Opera)

Finally, I fixed this issue by adding "componentDataHeader" class to the first row in table and then used following selector:

$("#tblComponentData tr:not([disabled=disabled]):not(.componentDataHeader)")

It works correctly in all browsers. But it is pretty interesting thing why gt(0) didn't work.

Thanks, Egor

Answer 1

have you tried chaining with .gt(0) - this should be the same though...

Answer 2

I don't think it's a jQuery issue but a DOM one. The DOM in IE seems to be different than the one in FireFox, this is why it shows a wrong results. Have you tried checking your HTML?