componentHandler.upgradeDom() in material-design-lite with for loop

Question

我正在使用 material design lite 并使用 for 循环插入元素。

var insertClass ='';
var classlist = document.querySelector('.classList');
for (var i = 0; i < 5; i++) {
    insertClass += '<div class="eachClass">' +
                      '<p>'+ i +'</p>' +
                     '<button id="demo-menu-lower-right" class="mdl-button mdl-js-button mdl-button--icon">'+
                       '<i class="material-icons">more_vert</i>'+
                     '</button>' +
                     '<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="demo-menu-lower-right">' +
                       '<li class="mdl-menu__item deleteClass">Delete</li>' +
                       '<li class="mdl-menu__item editClass">Edit</li>' +
                     '</ul>' +
                  '</div>';
}
classlist.innerHTML = insertClass;
componentHandler.upgradeAllRegistered('MaterialMenu', 'mdl-js-menu');

componentHandler.upgradeAllRegistered() 功能根本不起作用，但是当我使用 upgradeDom() 时，它只适用于第一个元素。

Answer 1

在您提供的示例中，您最终会得到具有相同 id 的多个按钮和具有相同 for[=] 的多个 ul 菜单19=]。这可能会解释为什么您似乎只获得一个菜单，因为 material design lite 使用 id 和 for 来绑定按钮和菜单在一起。尝试重写您的示例：

'<button id="demo-menu-lower-right_' + i + '" class="mdl-button mdl-js-button mdl-button--icon">'+ '<i class="material-icons">more_vert</i>'+ '</button>' + '<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="demo-menu-lower-right_' + i + '">' + '<li class="mdl-menu__item deleteClass">Delete</li>' + '<li class="mdl-menu__item editClass">Edit</li>' + '</ul>'

...这将为每个按钮和菜单提供一个唯一的 ID 或 for.

componentHandler.upgradeDom() in material-design-lite with for loop

componentHandler.upgradeDom() in material-design-lite with for loop

javascript

material-design-lite