javascript - 遍历每个 li 子输入找到值并相互增加

Question

大师！我有一个李的名单

<ul>
 <li><input type="hidden" value="7" name="order"></li>
 <li><input type="hidden" value="3" name="order"></li>
 <li><input type="hidden" value="6" name="order"></li>
 <li><input type="hidden" value="5" name="order"></li>
 <li><input type="hidden" value="1" name="order"></li>
 <li><input type="hidden" value="2" name="order"></li>
</ul>

我想在列表中添加一个带有隐藏输入的新​​ li 并设置输入 val+1 的值 - 通过找到所有输入的最大值来增加一。

你能帮助我吗？

Answer 1

请帮自己一个忙，并为此使用jQuery ：

var total;

$('li').find('input').each(function(){

   total = total == undefined || parseInt($(this).val()) > total ? parseInt($(this).val()) : total;

})

$('ul').append('<li><input type="hidden" value="' + (total + 1) + '" name="order"></li>');

该total变量将填充输入值的总和。然后，您可以以任何您喜欢的方式使用它。

Answer 2

var list = jQuery("ul li input").map(function(){
    return parseInt(jQuery(this).val(), 10);
    }).get();
var idNumber = Math.max.apply( Math, list );

Answer 3

在这里，一个不使用 jQuery 的 DOM 操作练习：

http://jsbin.com/uxowez/2

代码：

var inputs = document.getElementsByTagName('input'),
    ul = inputs[0].parentNode.parentNode,
    inputName = inputs[0].name,
    max = 0,
    newLi = document.createElement('li'),
    newInput = document.createElement('input'),
    newValue;

for (var i = 0, len = inputs.length; i < len; i++) {
    max = Math.max(max, inputs[i].value);
}

newInput.value = newValue;
newInput.name = inputName;
newLi.appendChild(newInput);
newLi.textContent = newValue;
ul.appendChild(newLi);

Answer 4

function doSomething() {
    var list = document.getElementsByTagName("ul");
    var liTags = list[0].getElementsByTagName("li");
    var max = -1;
    for (var i = 0; i < liTags.length; i++) {
        var inp = liTags[i].getElementsByTagName("input");
        if (inp[0].value > max) {
            max = inp[0].value;
        }
    }
    var newLI = document.createElement("li");
    list[0].appendChild(newLI);
    newLI.innerHTML = '<input type="hidden" value="' + (parseInt(max,10) + 1) + '" name="order">';
    alert(list[0].innerHTML);
}
doSomething();

http://jsfiddle.net/KWuzu/embedded/

好的，一个jQuery解决方案：

var $inputs = $("ul>li>input");
var max = -1;
$inputs.each(function () {
    max = $(this).val() > max ? $(this).val() : max
});
var $list = $("ul:first");
$list.append('<li><input type="hidden" value="' + (parseInt(max, 10) + 1) + '" name="order"></li>');
alert($list.html());

http://jsfiddle.net/NbWqX/embedded