Question

似乎无法想出这一个，感觉我在这里错过了一些傻事......

基本上，当悬停通过删除链接时，我正在尝试对该行中的所有文本执行直通，其中包含<td>的{{1}}除外。

基本的html结构是：

<a class="remove">

jQuery的：

<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>

Answer 1

在filter()内，this依次是td个元素。当您在此处调用children()时，您将获得一个jQuery对象，即<a> ，然后，您在中搜索 {{ 1}}用于另一个 <a>（这就是为什么你没有看到它）。

相反：

<a>

...但这并不是$(this).closest('tr').find('td').filter(function () { if ($(this).children('a').length == 0) { return $(this).css('text-decoration', 'line-through'); } });的设计目标。您应该使用filter来减少元素集，然后对结果进行操作：

filter

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 example

.filter（）然后仅适用于某些.children（）

4 个答案: