javascript - Why Jquery selector by 'value' not work in case of dynamic change

Question

I'm not sure why jquery selector value not work, Trying to change the value of inputs to "a" but the length not increment, please check the simple example bellow:

$('body').on('input', '.example', function() {
  $('#result').text($('.example[value="a"]').length);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="example" value="a">
<input type="text" class="example" value="b">
<input type="text" class="example" value="c">

<div id='result'></div>

Answer 1

If you are changing value dynamically it wouldn't get selected by attribute selector. You can use filter() instead.

Attribute selector will not check the dom node's value property it only targets the element's attribute

$('body').on('input', '.example', function() {
  $('#result').text($('.example').filter(function() {
    return this.value == 'a'
  }).length);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="example" value="a">
<input type="text" class="example" value="b">
<input type="text" class="example" value="c">

<div id='result'></div>