CODEWITHSUNDEEP
jquery
Breathing
Breathing

Reputation: 109

Using hover() with each() in jQuery?

I have a table which contains a single row with even tds. Half of them are remove from list data and the other half for add to list data.

So the structure in my razor view is somewhat like

<table class="table table-bordered table-hover dataTable" 
       role="grid" aria-describedby="example2_info">
    <tbody>
        @{int j = 0;}
        @foreach (var i in item.Data)
        {
            { j++; }
            <tr role="row" class="odd">
                <td class="sorting_1 remove-from-list_@j" style="word-break:break-all;">
                ...
                <td class="add-from-list_@j">
            ...

So each class is getting dynamically name given.

My jQuery function, is as follows:-

<script type="text/javascript">
    $(document).ready(function () {

        $(".table.table-bordered.table-hover.dataTable td.add-from-list")
           .not(':first').each(
            function (i) {
                $(".add-from-list_" + i).hover(function () {
                    $(this).css("background", "#fff2cc");
                })
            },
            function (i) {
                $(".add-from-list_" + i ).css("background", "");

            });
        $(".table.table-bordered.table-hover.dataTable td.remove-from-list").each(
            function (i) {
                $(".remove-from-list_" + i).hover(function () {
                    css("background", "#fff2cc");
                })
            },
            function (i) {
                $(".remove-from-list_" + i).css("background", "");
            });

It is not working.

Upvotes: 0

Views: 69

Answers (1)

Domenik Reitzner
Domenik Reitzner

Reputation: 1613

You really should use CSS for your hover effect!!! 

td[class^="add-from-list_"]:hover,
td[class^="remove-from-list_"]:hover{
    background: #fff2cc;
}

'^' means that the class starts with the string between the quotes.

Upvotes: 2

Related Questions