Question

说我有一个像：

这样的元素

angular.module('myApp.templates').run(function($templateCache) {
   $templateCache.put('url/of/template.html', '');
});

和JSON一样：

var myElem='<div class="oldClass" style="color:green;" id="oldId"><span>This DIV has some 
innerHTML as well</span></div>'

现在我需要用JSON中的数据更新var myJson = { "class": "myClass", "id": "myId", "style": "border: 1px solid black; color: red; font-size:20px;" };。

我试过的是：

myElem

我对此代码的期望：

for(var key in myJson){
    var attrName = key;
    var attrValue = myJson[key];
    console.log('attrName ', attrName);
    console.log('attrValue ', attrValue);
    $(myElem).removeAttr(attrName);
    $(myElem).attr(attrName, attrValue);
}

然而，这不起作用。myElem = '<div class="myClass" style="border: 1px solid black; color: red; font-size:20px;" id="myId"><span>This DIV has some innerHTML as well</span></div>'仍然是最初的 myElem和myElem都是动态的而不是静态的
任何人都可以告诉我我做错了什么？（我知道我做错了什么但是我找不到它）！

Answer 1

您可以将整个myJson对象传递给attr，而不必使用循环：

var myElem = '<div class="myClass" style="border: 1px solid black; color: red; font-size:20px;" id="myId"><span>This DIV has some innerHTML as well</span></div>';
var myJson = {
    "class": "myClass",
    "id": "myId",
    "style": "border: 1px solid black; color: red; font-size:20px;"
};

var elem = $(myElem).attr(myJson);

但如果你愿意，它甚至可以在一个循环中。我不知道你为什么这么想，但这是可能的。只需在循环外定义您的元素，然后就可以了：

var elem = $(myElem);

for( var key in myJson ) {
    if( myJson.hasOwnProperty(key) ) {
        elem.attr(key, myJson[key]);
    }
}

Answer 2

<强>问题

您没有编辑myElem，而是编辑它的临时jquery实例。

<强>阐释

在for循环的每次迭代中，您都要创建jquery对象$(myElem)的新实例，当.attr()和.removeAttr()执行时，它们将更改这个新实例中的属性将在循环的下一次迭代中被覆盖，因为它将创建一个新实例，因此您不是编辑myElem变量而是编辑它的临时jquery对象实例。

jQuery解决方案

如果您想使用jquery函数 attr() 编辑对象的属性，您有两个选择：

使用for循环： 创建一个jquery对象并让该函数更改属性，它将正常工作检查示例：

var myElemJQueryInstance = $(myElem);

for(var key in myJson){
    myElemJQueryInstance.attr(key, myJson[key]);
}

/*
NOTE : Your code will be more clear/efficient if you use just function .attr()
         (no need for removeAttr()) because it will override the old value in the
         attribute if is exist.
*/

通过传递JavaScript对象 ：您可以传递一个纯JavaScript对象。对象中的每个键值对都会添加或修改属性（在您的情况下，对象为myJson）：
```
$(myElem).attr(myJson);
```

JavaScript解决方案

你可以通过方法 setAttribute() 使用纯粹的js实现这一点：

for(var key in myJson){
    myElem = myElem.setAttribute(key, myJson[key]);
}

希望这有帮助。

＆＃13;

var myElem = '<div class="oldClass" style="color:green;" id="oldId"><span>This DIV has some innerHTML as well</span></div>'

var myJson = {
  "class": "myClass",
  "id": "myId",
  "style": "border: 1px solid black; color: red; font-size:20px;"
};

var myElemJQueryInstance = $(myElem);

for(var key in myJson){
  myElemJQueryInstance.attr(key, myJson[key]);
}

$('body').append(myElemJQueryInstance);
$('body').append(myElem);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

在javascript / jQuery中动态更改元素的属性

2 个答案: