Question

我正在尝试遍历页面上显示的表单列表，并根据其ID将每个元素附加到元素。

我想过做这样的事情，但它似乎没有起作用：

var number_of_forms = $('.common_form_class').length;

if (number_of_forms > 1) {
    $('.common_form_class').each(function() {
        var identity = $(this).attr('id');
        $.getJSON("/token.php?key=" + identity, function(data){
            $(this).append('<input type="hidden" class="token" name="token" value="'+data.token+'" />');
        });
    });
} else {
    var identity = $('.common_form_class').attr('id');
    $.getJSON("/token.php?key=" + identity, function(data){
        $('.common_form_class').append('<input type="hidden" class="token" name="token" value="'+data.token+'" />');
    });
}

我明白我不能通过使用$（this）来引用each（）循环中的表单，但是有谁知道我怎么能实现这个呢？

Answer 1

仅当您有多个表单时才有效。如果只有一个表单，您尝试使用$(this)而没有each循环，那么this将成为window对象。

此外，在回调中使用$(this)不起作用，因为稍后在循环范围之外执行回调。将对表单的引用存储在局部变量中，以便它在闭包中包含在回调函数中。

即使只有一种形式，你也可以循环：

$('.common_form_class').each(function() {
  var frm = $(this);
  $.getJSON("/token.php?key=" + frm.attr('id'), function(data){
    frm.append('<input type="hidden" class="token" name="token" value="'+data.token+'" />');
  });
});

或者更好地使用jQuery：

$('.common_form_class').each(function(i, frm) {
  $.getJSON("/token.php", { key: frm.attr('id') }, function(data){
    frm.append($('<input/>', { type: 'hidden', 'class': 'token', name: 'token' }).val(data.token));
  });
});

注意：通过使用val方法设置值而不是将其连接到HTML代码中，您不必担心可能破坏HTML代码的字符。

Answer 2

我用更好的风格重写了你的代码，请测试：

$('.common_form_class').each(function() {
    var $this = $(this);
    $.getJSON("/token.php", {key: $this.attr('id')}, function(data){
        $this.append($("<input/>", {type: "hidden", "class": "token", name: "token"}).val(data.token));
    });
});

jQuery each（）函数根据其id将元素追加到每个表单

2 个答案: