Using hover() with each() in jQuery?

Question

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.

A side node for you: I think you should check your html code. They are some errors there. Maybe there are the source of your trouble. — Reporter
– Reporter, Commented May 28, 2018 at 8:47
You're passing two functions to each. I don't see any documentation for doing that. When things don't work (or even before), the documentation should be your first port of call. — T.J. Crowder
– T.J. Crowder, Commented May 28, 2018 at 8:53
I don't see any td with the class add-from-playlist in your HTML. I see ones with add-from-playlist_0 and such, but those won't match the selector you're using. All due respect, the problem above just needs debugging using the powerful debugger built into your browser. It may also be a good idea to step back from this task and work through some jQuery tutorials. There's no need for each td to have its own add-from-playlist_0 class, for instance. — T.J. Crowder
– T.J. Crowder, Commented May 28, 2018 at 8:56
@T.J.Crowder I was doing all this because I have a single row and many tds.(And this repeats, so variable j acts like a global variable) I don't want to break it into 2 trs. Your last line says there is no need for each td to have its own add-from-playlist_0 class. Not each td will have this class. only some. — Breathing
– Breathing, Commented May 28, 2018 at 9:17

Domenik Reitzner · Accepted Answer · 2018-05-28 09:30:57Z

2

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.

answered May 28, 2018 at 9:30

Domenik Reitzner

1,6131 gold badge16 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using hover() with each() in jQuery?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related