javascript - 使用 JS 捕获 HTML li 值

Question

我想创建一个 JS 函数来捕获“已完成任务”无序列表中每个 li 元素的“值”属性。我还希望它将这些值加在一起。

我的 html:

<ul id="completed-tasks">
    <li value="1"><label>item 1</label></li>
    <li value="2"><label>item 2</label></li>
    <li value="3"><label>item 3</label></li>
</ul>

我的 javascript 函数:

var totalValue = function(){
    //cycle over ul items
    for (var i=0; i<completedTasksHolder.children.length; i++){
    //I want to capture 'value' of each li here
    }   
    //I want to add values here
}

请帮助我完成该功能^^(我知道循环正在运行)。 totalValue 应该是 6。

Answer 1

这将完成您正在寻找的东西。它假定该值将始终可转换为数字(如果不是，将导致 NaN )。

function total() {
  var completedTasks = document.getElementById('completed-tasks'),
    total = 0;

  for (var i = 0; i < completedTasks.children.length; i++) {
    total += +completedTasks.children[i].value;
  }
  return total;
}

console.log(total());

<ul id="completed-tasks">
  <li value="1">
    <label>item 1</label>
  </li>
  <li value="2">
    <label>item 2</label>
  </li>
  <li value="3">
    <label>item 3</label>
  </li>
</ul>