如何对tr中的所有td使用each（），除了最后一个？

Question

我有3个表，每行有2 \ 4 \ 6列，最后一列包含 edit 按钮。

当我按编辑按钮时，我希望所有其他td将变成文本框。

剧本：

$(".icon-pencil").click(function () {
    var row = $(this).parent('td').parent('tr');
    row.find('td').each(function () {
        $(this).html("hi");
    });
});

一行示例：

<tr>
    <td>1</td>
    <td>
        <img src="img/couponimg.png" alt="" />
    </td>
    <td>1</td>
    <td>A coupon for ..</td>
    <td><i class="icon-pencil"></i>
    </td>
    <td><i class="icon-remove"></i>
    </td>
</tr>

它按我的意愿工作，但它将更改应用于所有<td>，我不想更改最后一个。

如何防止影响到最后一个？

Answer 1

我建议事件委托。

$(document).on('click', '.icon-pencil', function () {
    $(this).closest('tr').find('td:not(:last)').html("hi");
});

---

另外，

$('something').each(function() {
    $(this).html("hi");
});

相当于

$('something').html("hi");

Answer 2

试试这个：

row.find('td').each(function() {
                    $(this).not('td:last-child').html("hi");
                });

Answer 3

尝试此操作并使用排除最后2列的:not(:nth-last-child(-n+2))。

$(".icon-pencil").click(function() { 
                var row = $(this).closest('tr');
                    row.find('td:not(:nth-last-child(-n+2))').each(function() {
                    $(this).html("hi");
                });
            });

示例：

http://jsbin.com/oyUvAhi/2/edit

2个变化：

• closest代替.parent('td').parent('tr')
• 找到TR时 - 只选择相关的TD进行更改。

修改

请阅读@FrançoisWahl评论 - 这有助于缩短代码： row.find('td:not(:nth-last-child(-n+2))').html("hi");

Answer 4

由于HTML格式正确，在这种特殊情况下，:last CSS选择器运行良好，因此您可以使用它。当元素不是父节点中的最后一个节点，或者甚至不是父节点中:last-of-type的类型的最后一个节点时，我会给你一个更通用的解决方案。

jQuery对象是元素的集合。通常用于创建此类集合的CSS选择器在DOM上匹配，但是一旦有了jQuery对象，就可以以任何方式操作它。如果你想消除最后一个元素，你可以这样做：

var myJQueryObject = $('mySelector');
Array.prototype.splice.call(myJQueryObject, myJQueryObject.length-2, 2); // removed the last two elements

这依赖于jQuery对象是类似于Array的对象（具有length属性和类似数字的键）和Array.prototype.*方法可用于类似Array的对象这一事实。