Question

我有一堆具有一系列属性的对象。一些属性将显示在输入元素中，一些属性显示在标签中。

所以，我的代码看起来像这样：

  var data = getMyData();
  var propNames = Object.keys(data);
  var i, propName, elem;
  for (i = 0; i < propNames.length; ++i) {
    propName = propNames[i];
    elem = $("#" + propName);
    if (elem.is('input')) {
      elem.val(data[propName]);
    } else {
      elem.html(data[propName]);
    }
  }

在jquery中执行此操作是否正确？因为它看起来有点难看......

感谢。

Answer 1

我发现将方法名称存储在变量（text / val）中更容易，因此我们没有那么多代码重复（代码中的条件会导致不必要的重复））。

此外，既然你无论如何使用jQuery，你也可以使用each。它将所有内容简化为：

$.each(getMyData(), function (key, val)
{
    var el = $("#" + key),
        method = el.is('input') ? 'val' : 'text';

    el[method](val);
});

这是小提琴：http://jsfiddle.net/pFbSf/

如果您不喜欢将方法名称存储在变量中，请改为使用：

$.each(getMyData(), function (key, val)
{
    var el = $("#" + key);

    el.is('input') ? el.val(val) : el.text(val);
});

这是小提琴：http://jsfiddle.net/GQTZv/

如果您担心jQuery not using hasOwnProperty，可以自行运行检查：

var data = getMyData();

$.each(data, function (key, val)
{
    if ( ! data.hasOwnProperty(key) ) return;

    var el = $("#" + key);

    el.is('input') ? el.val(val) : el.text(val);
});

这是小提琴：http://jsfiddle.net/GQTZv/1/

Answer 2

我认为你可以使用jQuery .each（）函数重写for循环，它可以迭代任何数组或对象。它需要一个回调函数，它给出索引（或键）和每个项的值。

在您的示例中，它将类似于：

jQuery.each(data, function(key, value) {
   elem = jQuery("#" + value);
   if (elem.is('input')) {...

查看jQuery.each()

的文档

Answer 3

假设您尝试填写input或textarea，您应该可以将其替换为：

var data = getMyData();
var propNames = Object.keys(data);

for (i = 0; i < propNames.length; ++i) {
  $("input#"+propNames[i]).val(data[propNames[i]);
  $("textarea#"+propNames[i]).html(data[propNames[i]);
}

您甚至可以通过以下方式替换两个jQuery选择器：

  $("input#"+propNames[i]).val(data[propNames[i]).html(data[propNames[i]);

由于input元素没有innerHTML和textarea元素没有val，因此这应该按原样运行。哈金，但它很简洁。

Answer 4

一切看起来都很好Mark。我强烈反对的一件事是使用像Object.keys这样的新的Object原型方法，它只在IE9 +和其他较新的浏览器中可用。相反，要么在所有JS（我实际上不喜欢这样做）之前为它创建原型，要么使用副本解决方案来处理它，就像底部的function getkeys()一样。

http://jsfiddle.net/WJ24q/1/

for (i = 0; i < propNames.length; ++i) {
    var el = $("#" + propNames[i]),
        _d = data[propNames[i]];

    // you could also use a simple ternary instead of the if/else
    el.is('input') ? el.val(_d) : el.html(_d);
}

函数而不是Object.keys：

function getKeys (obj){
   var keys = [];
   for(var key in obj){
      keys.push(key);
   }
   return keys;
}

Answer 5

我不明白这看起来有多丑，但我不明白为什么你需要Object.keys ...你可以用常规for...in来简化它：

var data = getMyData(), 
    d, $el;
for (d in data) {
  $el = $('#'+ d);
  if ($el.is('input')) {
    $el.val(data[d]);
  } else {
    $el.html(data[d]);
  }
}

在jquery中从同一对象的属性设置输入字段和标签的正确方法是什么？

5 个答案: