Can't seem to figure this one out, feel like I'm missing something silly here...

jsFiddle Demo

Basically, when hovering over the remove link, I'm trying to do a line-through on all text in that row, EXCEPT for the <td> with that <a class="remove"> in it.

The basic html structure is:

<tr>
    <td>Lorem ipsum text here</td>
    <td>01/01/2012</td>
    <!-- all <td>'s except for the Remove one should get a line-through -->
    <td><a class="remove">Remove</a></td>
</tr>

jQuery:

$('tr').on({
    'mouseover' : function () {
        $(this).closest('tr').find('td').filter(function () {
            var $childElems = $(this).children();

            // I can see the <a class="remove"> in .children()
            // But for some reason can't just test (hey there's an <a>, 
            // then don't apply this)

            if ($childElems.find('a').length <= 0) {
                return $(this).css('text-decoration', 'line-through');
            }
        });
    },
    'mouseout' : function () {
        $(this).closest('tr').find('td')
            .css('text-decoration', 'none');
    }
}, 'a.remove');

Can't seem to figure this one out, feel like I'm missing something silly here...

jsFiddle Demo

Basically, when hovering over the remove link, I'm trying to do a line-through on all text in that row, EXCEPT for the <td> with that <a class="remove"> in it.

The basic html structure is:

<tr>
    <td>Lorem ipsum text here</td>
    <td>01/01/2012</td>
    <!-- all <td>'s except for the Remove one should get a line-through -->
    <td><a class="remove">Remove</a></td>
</tr>

jQuery:

$('tr').on({
    'mouseover' : function () {
        $(this).closest('tr').find('td').filter(function () {
            var $childElems = $(this).children();

            // I can see the <a class="remove"> in .children()
            // But for some reason can't just test (hey there's an <a>, 
            // then don't apply this)

            if ($childElems.find('a').length <= 0) {
                return $(this).css('text-decoration', 'line-through');
            }
        });
    },
    'mouseout' : function () {
        $(this).closest('tr').find('td')
            .css('text-decoration', 'none');
    }
}, 'a.remove');

• javascript
• jquery
• jquery-events

4 Answers 4

Inside the filter(), this is each of the td elements in turn. When you call children()on this, you get back a jQuery object which is the <a>, then, you're searching within that <a> for another <a> (which is why you're not seeing it).

Instead:

    $(this).closest('tr').find('td').filter(function () {
        if ($(this).children('a').length == 0) {
            return $(this).css('text-decoration', 'line-through');
        }
    });

... but that's not really what filter was designed for. You're supposed to use filter to reduce the set of elements, and then operate on the result:

$(this).closest('tr').find('td').filter(function () {
    return !$(this).children('a').length;
}).css('text-decoration', 'line-through');

This would be a lot easier if you did not manipulate CSS properties directly, but used a class for that.

Add that class to your tr element on hover, and format the td using the descendant selector:

tr.highlighted td { text-decoration:line-through; }
tr.highlighted td:last-child { text-decoration:none; }

$('tr').on({
    'mouseover' : function () {
        $(this).closest('tr').find('td').each(function () {
            if($(this).find('a.remove').length == 0){
                $(this).css('text-decoration', 'line-through');
            }
        });
    },
    'mouseout' : function () {
        $(this).closest('tr').find('td').css('text-decoration', 'none');
    }
}, 'a.remove');

$('a.remove').hover(function () {
    $(this).parents('tr').find('td').filter(function () {
        return !$(this).find('a.remove').length;
    }).css('text-decoration', 'line-through');
}, function () {
    $(this).parents('tr').find('td').css('text-decoration', 'none');
});

jsFiddle example