我有4个mdl标签，我在每个标签中动态创建一个mdl卡列表。每张卡都有一个mdl菜单，如下所示：
// job settings dropdown :
settingsButton.setAttribute('id', 'jobSettings');
var jobUl = document.createElement('ul');
jobUl.className = 'mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect';
jobUl.setAttribute('for', 'jobSettings');
var jobLi = document.createElement('li');
var jobLi2 = document.createElement('li');
var jobLi3 = document.createElement('li');
jobLi.className = 'mdl-menu__item';
jobLi2.className = 'mdl-menu__item';
jobLi3.className = 'mdl-menu__item';
jobLi.textContent = 'Edit';
jobLi2.textContent = 'Delete';
jobLi3.textContent = 'Pay';
jobUl.appendChild(jobLi);
jobUl.appendChild(jobLi2);
jobUl.appendChild(jobLi3);
哪个会在html中显示如下：
<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">Edit</li>
<li class="mdl-menu__item">Delete</li>
<li class="mdl-menu__item">Pay</li>
然后我做componentHandler.upgradeDom();希望升级每个无序列表（ul）中的mdl菜单项。
这似乎只适用于整个网站中的一个列表元素（li）。它不适用于任何其他选项卡上的任何其他元素。如何在每个动态创建的ul中为每个动态创建的列表元素设置我的mdl菜单？
问题可能是你在多个菜单元素中复制id值（如果有多个按钮的id值与菜单元素上的for值匹配，MDL将会混淆）。您可以在id和for值中添加数字增量，以确保每个菜单都是唯一标识的。
请参阅以下示例。请注意，Object.assign用于缩短代码，但由于限制，我们仍然需要使用setAttribute来设置for元素的ul属性，因为该属性不能直接访问。
const fragment = document.createDocumentFragment();
const addCard = (n) => {
let card = document.createElement('div');
let menu = document.createElement('div');
let button = document.createElement('button');
let icon = document.createElement('i');
let list = document.createElement('ul');
let items = ['Action 1', 'Action 2', 'Action 3'];
icon.textContent = 'more_vert';
Object.assign(card, {className: 'mdl-card mdl-shadow--2dp'});
Object.assign(menu, {className: 'mdl-card__menu'});
Object.assign(button, {
className: 'mdl-button mdl-js-button mdl-button--icon',
id: 'menu' + n
});
Object.assign(icon, {className: 'material-icons'});
Object.assign(list, {
className: 'mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect'
});
list.setAttribute('for', 'menu' + n);
fragment.appendChild(card);
card.appendChild(menu);
menu.appendChild(button);
button.appendChild(icon);
menu.appendChild(list);
for (let item of items) {
let listItem = document.createElement('li');
listItem.textContent = item;
Object.assign(listItem, {className: 'mdl-menu__item'});
list.appendChild(listItem);
}
}
for (let i = 0; i < 2; i++) {
addCard(i);
}
document.querySelector('#container').appendChild(fragment);
componentHandler.upgradeDom();.mdl-card {
margin: 8px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Material Design Lite Cards / Menus</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
</head>
<body>
<div id="container"></div>
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</body>
</html>