Jquery Select Multi divs

Question

嗨，我想选择所有输入并输入输入字符，但我编写的代码只选择第一个输入。

$('.select').keyup(function () { 

var len = $('.myinput').val().length; 
$('.val').text(len + ' character');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="text">
</div>
<div class="val"></div>

Answer 1

遍历所有输入元素，class="myinput"，并求和输入值的长度

$('.select').keyup(function () { 
var len= 0;

$('.myinput').each(function(){
len += this.value.length;
});

$('.val').text(len + ' character');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="text">
</div>
<div class="val"></div>

Answer 2

您可以尝试以下代码。代码将所有id = "myinput"更改为class = "myinput"。然后在keyup事件中，选择所有具有类myinput的input字段，并使用.each循环来计算输入字段中所有字符的长度。最后，div更新为新的长度。

$('.select').keyup(function () {
let len = 0;
$('.myinput').each( (i,v) => {
len += $(v).val().length;
}); 
$('.val').text(len + ' character');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="text">
</div>
<div class="val">
</div>

Answer 3

您需要计算每个元素的长度，为此您可以使用.each()根据需要递增len。

最好使用class而不是id.因为它id将只返回文档中的第一个元素。

$('.select').keyup(function() {
var len = 0;
$('.myinput').each(function() {
len += $(this).val().length;
});
$('.val').text(len + ' character');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="text">
</div>
<div class="val"></div>

这是一个工作示例。 https://jsfiddle.net/xk6q81rd/11/