Question

<input id="aaa1" value="vvv">
<input id="aaa2" value="">
<input id="aaa3" value="ooo">
<input id="aaa4" value="">
<input id="aaa5" value="ooo">
<input id="aaa6" value="ooo">

if($('input[id^="aaa"]').val().length == 0){
    $('input[id^="aaa"]').css('background-color', 'red');
}

$("#aaa1").live("click", function(){
  $(this).after("<input id='aaax' value='ooo'>");
});

why this working only for first input? if first input value is null then this add css for all input.
how can i make it separately for all input? i use also function live() – i would like added this also for new input

LIVE EXAMPLE: http://jsfiddle.net/Zm5jp/1/

Answer 1

You need to iterate over the inputs matched using each;

$('input[id^="aaa"]').each(function () {
    var self = $(this);

    if (self.val().length == 0) {
        self.css('background-color', 'red');
    }
}

As stated in the docs for val();

Get the current value of the first element in the set of matched elements.

I.e. your code translates as “if the first input value is empty, set the background CSS for all elements”