javascript - 未使用 $(this) 提醒第二个 div 的内容

Question

这是我的完整代码:

<input id="storecipient">
<div class="hidbdsp">
    <div class="hidname">tomato</div>
    <div class="hidname">orange</div>
</div>

<script type="text/javascript">
$(document).ready(function() {
  $("#storecipient").on('input', function() {  
    var thisFstchar = $(this).val();
    var name = $(this).siblings(".hidbdsp").children(".hidname").html();
    if (thisFstchar.charAt(0) == name.charAt(0)) {
        alert(name);
    }
  });
});
</script>

我的 js 代码的作用是提醒包含输入中键入的单词的第一个字母的完整单词。因此，当输入字母“t”时，会显示单词“tomato”，但是当在输入中输入“o”时，不会显示“orange”。即使“orange”和“tomato”都具有相同的类“.hidname”，$(this) 选择器只会选择 tomato，但会跳过 Orange。这是为什么？

Answer 1

试试这个

$(document).ready(function() {
    $("#storecipient").on('input', function() {
        var thisFstchar = $(this).val();
        $(this).siblings(".hidbdsp").children(".hidname").each(function() {
            var name = $(this).html();
            if (thisFstchar.charAt(0) == name.charAt(0)) {
                alert(name);
            }
        });

    });
});

<input id="storecipient">
<div class="hidbdsp">
    <div class="hidname">tomato</div>
    <div class="hidname">orange</div>
</div>
  
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>