jQuery中的选择器^-怎么做？

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

val gets the value of the first element in the matched set . You'll have to iterate over the set :

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

Answer 2

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.

Ie your code translates as "if the first input value is empty, set the background CSS for all elements"