仅执行一次 DOM 迭代

Question

>我在单元格中有一个带有按钮的表格行。当我单击该按钮时，我想将同一行的每个单元格内的文本分配给变量。因此，如果我有 5 个单元格，我将有 4 个变量（第 5 个用于按钮）。

我现在做的是：

$('.save').click(function(e){
    var id = $(this).closest('tr').find('.id').text();
    var x = $(this).closest('tr').find('.x').text()
});

this指的是按钮，所以我必须向上导航到包含tr并向下导航到每个单元格。有没有办法避免遍历每个变量的 dom？换句话说，要专注于该行而不每次重复$(this).closest('tr')？注意：我指的不仅仅是写它，而是背后的行动。因此，像var row = $(this).closest('tr')这样的东西不是解决方案，因为无论如何都会再次执行查找行的操作。

Answer 1

因此，像var row = $(this).closest('tr')这样的东西不是解决方案，因为无论如何都会再次执行查找行的操作。

不，不会。它将执行一次（当单击发生时），其结果（围绕tr元素包装的jQuery对象）存储在row变量中。所以这正是你的做法。

$('.save').click(function(e){
    var row = $(this).closest('tr');
    var id = row.find('.id').text();
    var x = row.find('.x').text()
});

Answer 2

我认为

var tr = $(this).closest("tr")会做到这一点，因为您不必再去那一行了。

Answer 3

使用dataset属性扩展按钮标记，其中包含单击发生时要使用的所需数据：

<button data-id="some-id" data-x="some-x" ...>

因此，您可以使用所需的属性生成此按钮，而无需始终检查 DOM。

$('.save').click(function(e){
    var id = $(this).data('id');
    var x = $(this).data('x');
});