jQuery的addClass无法正常工作

Question

I am changing the data-position of 2 rows in a table. The classes for the arrow-up and arrow-down images are not being set correctly.

If position is 1, then it should be only an arrow-down. Likewise, if position is the last, then only the arrow-up should be available. In any other case, both arrows should be visible.

Here is the JavaScript I tried:

function sortTable( tablename )
{
    var count = $("#" + tablename + " tr").length;
    $("#" + tablename + " tr").each(function()
    {
        var that = $(this);
        if (that.data("position") == 1)
        {
            $(this)
                .find("img.rowUp")
                .addClass("imgDisplayNone" );
        }
        else if (that.data("position") == count)
        {
            $(this)
                .find("img.rowDown")
                .addClass("imgDisplayNone" );
            console.log("positon == anzahl" + that.data("position") + " anzahl " + count);
        }
        else if(that.data("position")>1 && that.data("position")< count)
        {
            $(this)
                .find("img.rowUp")
                .removeClass("imgDisplayNone" );
        }
    });

}

I think the problem is the difference between the sourcecode and the DOM-manipulation, but I'm not sure how to fix it.

I have read that I need jQuery's .index , but I don't know how to implement it.

Thank you for your help.

Here is a Fiddle to demonstrate my problem.

Answer 1

You could do this with just CSS:

tr:first-child img.rowUp { display: none }
tr:last-child img.rowDown { display: none }

http://jsfiddle.net/Q6Q8T/