Question

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

我的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

试试这个：

var totalValue = function () {
    //cycle over ul items
    var completedTasksHolder = document.getElementById("completed-tasks");
    var total = 0;
    for (var i = 0; i < completedTasksHolder.children.length; i++) {
        //I want to capture 'value' of each li here
        var v = parseInt(completedTasksHolder.children[i].getAttribute("value")); //parseInt for string to number conversion
        total += v;
    }
    //I want to add values here
    console.log(total);
}
totalValue();

演示：http://jsfiddle.net/GCu2D/589/

Answer 2

这将实现您正在寻找的东西。它假设该值始终可以转换为数字（如果有任何数字，则会导致NaN）。

＆＃13;

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());

＆＃13;

<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>

＆＃13;

使用JS捕获HTML li值

2 个答案: