javascript - .filter() 然后仅适用于某些 .children()

Question

似乎无法弄清楚这一点，感觉我在这里错过了一些愚蠢的东西......

jsFiddle 演示

基本上，当将鼠标悬停在删除链接上时，我试图对该行中的所有文本进行换行，除了其中的<td>文本<a class="remove">。

基本的html结构是：

<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');

Answer 1

在filter(),里面依次this是每个元素。td当您调用children()它时，您会返回一个 jQuery 对象，<a>然后，您正在其中搜索另一个<a>（这 就是<a>您没有看到它的原因）。

反而：

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

...但这并不是真正filter的设计目的。您应该使用filter减少元素集，然后对结果进行操作：

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

Answer 2

如果您不直接操作 CSS 属性，而是使用一个类，这会容易得多。

tr在悬停时将该类添加到您的元素，并td使用后代选择器格式化：

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

Answer 3

$('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');

Answer 4

$('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 示例