Javascript 是否允许在函数和包含的每个循环中使用jQuery$（此）选择器两次？

我有一个列表，其中包含x列数据。当单击行中的编辑按钮时，我想将该行中每一列的html内容设置为数组，该数组中有一个name属性，该键由columns name attributes值命名

data['id']   = '123';
data['name'] = 'John Doe';
data['city'] = 'Arlington';

为此，我在edit div上启动了一个click事件。在这个函数中，我使用$（this）选择器在具有name属性的所有元素上设置each（）循环。 在这个循环中，我再次使用$（this）选择器捕获每个匹配元素的名称和值

所以，我的问题是：虽然它有效，但允许它这样做吗？将$（this）用于同一函数中的两个不同内容？ 还有别的办法吗

下面是我的工作示例代码

$（文档）.ready（函数（）{
$（文档）。在（“单击“，”.edit“，函数（）上）{
变量数据={}；
$（this）.closest（'.row'）.children（'div[name]'）。each（function（）{
//form_data.append（$（this.attr（'name'），$（this.html（））；
数据[$（this.attr（'name'）]=$（this.html（）；
});
$（'#result'）.html（JSON.stringify（data，null，4））；
});
});

123
无名氏
柏林
>编辑试试这个技巧：

$( document ).ready(function() {
    $(document).on( "click", ".edit", function() {
      var data = {};
      var that = this; // trick here
      $(this).closest('.row').children('div[name]').each(function() {
        //form_data.append($(this).attr('name'), $(this).html());
        data[$(this).attr('name')] = $(that).html();// replace this = that if you want to get parent element
      });

      $('#result').html(JSON.stringify(data, null, 4));

    });
});

没有什么错，你所做的就是这样


函数setDivs（）{
//form_data.append（$（this.attr（'name'），$（this.html（））；
数据[$（this.attr（'name'）]=$（this.html（）；
}
函数docClick（）{
变量数据={}；
$（this）.closest（'.row'）.children（'div[name]'）。each（setDivs）；
$（'#result'）.html（JSON.stringify（data，null，4））；
}
函数docReady（）{
$（文档）。在（“单击”、“编辑”上，docClick）
}
$（document）.ready（docReady）

123
无名氏
柏林
>编辑
允许吗

当然，这是有效的

这取决于你所说的“允许”是什么意思


这是不是让人困惑——也许吧
它会引起问题吗？肯定会

（关于这一点有很多问题，或者由此引起的问题，证实了它会导致问题）

重用变量名（在本例中为“this”）是常见的，并且基于作用域

很难判断您是否因为实际需要“.edit”html或“.edit”attr而不是
div
，因此您可以通过将
此
复制到变量中来消除这种混淆：

$(document).on( "click", ".edit", function() {
  var data = {};
  var btn = $(this);  // the button that was clicked

  btn.closest('.row').children('div[name]').each(function() {

    // Do you mean the div or did you really mean the clicked button?
    data[$(this).attr('name')] = $(this).html();  

    var div = $(this);  // the child div

    // clearly not what is desired
    // `btn` variable referring to the outer `this`
    data[div.attr('name')] = btn.html();  

    // intention clear
    data[div.attr('name')] = div.html();  
  });

  $('#result').html(JSON.stringify(data, null, 4));

});

在这种情况下，这是“清楚的”，因为您不会在所有数据条目上使用btn html（或者您会吗？我不知道您的要求…）。所以“不太可能”

但是很容易看出，在另一个场景中，您希望如何在嵌套的
中引用单击的内容
btn==this
。每个
函数（函数（）{…}
）内部没有任何错误您有一个新的本地
this
。它是允许的，因为
this
在每个范围中都会发生变化，我会将它放入一个变量中，尽管它可能会使读取变得混乱，这会使维护更加困难