-6

gurus! I have a list of li's

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

I want to add a new li with hidden input to the list and set the value of the input val+1 - increase by one by finding the maximum values of all inputs.

Can you help me?

jam
  • 65
  • 1
  • 11
  • 2
    Sure, but please post what you've tried first. – j08691 Aug 09 '13 at 20:19
  • 2
    Seriously, google for 5 minutes and you will find something. Try forEach – Zack Argyle Aug 09 '13 at 20:20
  • I'm unsure of what you actually want. Do you want to find the maximum value of inputs or actually add new inputs? – shennan Aug 09 '13 at 20:27
  • 5
    That's a shame. Remember we all volunteer to help here. If you're in a hurry, consider hiring someone. – j08691 Aug 09 '13 at 20:28
  • To be fair I think he's getting a lot more of a berating then he needs considering the many uninspiring questions on SO. Let's just figure out what he needs and help him? :-| – shennan Aug 09 '13 at 20:29
  • shennan. Thank you for your support. I need to find the maximum value of from all li's input values. – jam Aug 09 '13 at 20:33

4 Answers4

1

Please do yourself a favour and use jQuery for this:

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

The total variable will be populated with the sum of the input values. You can then use this in whatever way you'd like.

shennan
  • 10,798
  • 5
  • 44
  • 79
  • Your code is still incorrect. And jQuery is overkill for this small, simple task. –  Aug 09 '13 at 20:43
  • shennan, I dont need the sum ov all values, but find the maximum value. – jam Aug 09 '13 at 20:45
  • OP asked for the greatest plus one to become the value of a new `input` in a new `li`. –  Aug 09 '13 at 20:47
  • Removed the DV, but it would be safer to start your `total` at `-Infinity` just in case there could be all negative numbers. Just a little more resilient that way. Also OP wants to add new elements, though IMO, you should leave that as an exercise for OP. –  Aug 09 '13 at 20:51
  • @CrazyTrain Agreed. Though I don't think jQuery is overkill. The likelihood of him continuing his 'career' in web development without using jQuery is slim at best. – shennan Aug 09 '13 at 20:58
  • That's not true at all. The deeper one gets into development, the more likely one is to realize that projects like jQuery are becoming less and less appealing as browser compatibility issues fade away. Especially with mobile browsers, companies want to remove unnecessary bloat. –  Aug 09 '13 at 21:01
  • @CrazyTrain I take your point, but "that's not true at all" (i.e there is no truth to my point) does you a tremendous disservice. It's cute that your opinion on web development is five years ahead of everyone elses, but browser compatibility and the need for abstraction is still just as important right now IMO. – shennan Aug 09 '13 at 21:06
  • Oh, no. Not 5 years. I'm reflecting on the situation today. jQuery may still be useful for certain situations, but overall, it's easy to get by without it if you're not supporting JS in IE6/7. The mindset that the use of jQuery on a site is simply a given is a couple years behind. –  Aug 09 '13 at 21:11
  • @CrazyTrain Being a 'couple of years behind' is, unfortunately, a large part of what web development is about today. IE6/7 are still (whether we like it or not) popular browsers. – shennan Aug 09 '13 at 21:16
  • 1
    Unless you're developing sites targeted specifically at the Chinese market, no they're not at all popular. We're talking generally under 1% share combined. One can direct those users to the non-JS version of the site. –  Aug 09 '13 at 21:18
  • @CrazyTrain I can see you won't budge on this subject, but you'll be pleased to know there are now two additional answers both of which involve no jQuery. On an aesthetic and time-saving level, I see no problem with a little bit of jQuery 'sugar'. But we should probably agree to disagree here. – shennan Aug 09 '13 at 21:20
  • Yeah, I think we just disagree. Those answers don't at all reflect how I'd implement a solution. After loading a polyfill for IE8, mine would look more like this: http://jsfiddle.net/k3Buf/ Though I generally use a cleaner means of complex DOM creation, the short function gives enough benefit for this simple situation. And I'm not saying jQuery isn't at all useful. Just saying that it's much less relevant today than a couple years ago. –  Aug 09 '13 at 21:32
  • 1
    @jam: This isn't a war. Just having a very simple discussion. The answer you found is basically what shennan is doing. –  Aug 09 '13 at 21:47
  • shennan, I really appreciate your help! I got a lot experience from this case. I learn from each case related with programming. – jam Aug 09 '13 at 22:00
0
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/

okay, a jQuery solution:

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

Gary Dean
  • 21
  • 6
0

Here you go, an exercise in DOM manipulation without jQuery:

http://jsbin.com/uxowez/2

code:

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);
tuff
  • 4,895
  • 6
  • 26
  • 43
0
var list = jQuery("ul li input").map(function(){
    return parseInt(jQuery(this).val(), 10);
    }).get();
var idNumber = Math.max.apply( Math, list );
jam
  • 65
  • 1
  • 11