Question

我必须使用DOM为li标签添加一个class属性。我很失落。这就是我所做的，这是正确的吗？

map = {
    'a': 'aee',
    'b': 'bee',
    'c': 'see'
}

<div *ngFor="let o of map | mapToIterable">{{o.key}}: {{o.value}}</div>
  <div>a: aee</div>
  <div>b: bee</div>
  <div>c: see</div>

<div *ngFor="let o of map | mapToIterable:'keyval'">{{o.key}}: {{o.value}}</div>
  <div>a: aee</div>
  <div>b: bee</div>
  <div>c: see</div>

<div *ngFor="let k of map | mapToIterable:'key'">{{k}}</div>
  <div>a</div>
  <div>b</div>
  <div>c</div>

<div *ngFor="let v of map | mapToIterable:'value'">{{v}}</div>
  <div>aee</div>
  <div>bee</div>
  <div>see</div>

var d = document;
var ul = d.getElementsByTagName('ul');
var li = ul.getElementsByTagName('li');

for (var i = 0; i < li.length; i++) 
{
  var clases = d.createElement('class');
  clases.class = 'Bebida';
  li.appendChild(clases);
}

感谢。

Answer 1

从您的Javascript中您遇到一些问题。

首先关闭

var ul = d.getElementsByTagName('ul');

这将返回一个ul元素数组，因此您无法直接在数组上调用var li = ul.getElementsByTagName('li')。

您需要迭代数组中的每个ul并从数组项中获取li，例如。

var ul = d.getElementsByTagName('ul');
for (var u = 0; u < ul.length; u++) {
  var li = ul[u].getElementsByTagName('li')
}

现在，就像ul变量一样，li也是一个数组，因此您需要迭代数组中的每个li项。

var ul = d.getElementsByTagName('ul');
for (var u = 0; u < ul.length; u++) {
  var li = ul[u].getElementsByTagName('li')
  for (var i = 0; i < li.length; i++) {

  }
}

下一个问题是你不要创建class元素。 class是li元素的属性。这可以通过每个元素的className属性访问。

为了完成这项工作，您可以将它们全部放在一起。

var ul = d.getElementsByTagName('ul');
for (var u = 0; u < ul.length; u++) {
  var li = ul[u].getElementsByTagName('li')
  for (var i = 0; i < li.length; i++) {
    li[i].className = 'Bebida';
  }
}

以下是JSFiddle供您查看。

我还要补充一点。捕获ul元素的第一个循环是无关紧要的。您可以直接跳过此操作并捕获所有li元素。这将减少所需的循环量。

鉴于您正在捕获所有ul元素，然后捕获li的所有ul，您只需从文档中获取所有li元素即可。当然，如果您只想要li的子ul而不是其他元素（例如ol），那么情况就是这样。

这可以简化为。

var liArray = d.getElementsByTagName('li');
for(var i=0; i<liArray.length;i++)
    liArray[i].className = 'Bebida';

如何使用Dom将类属性添加到li标签

1 个答案: