javascript - 第二个div的内容未使用$(this)发出警报

这是我的完整代码：

<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，但会跳过橙色。为什么是这样？

最佳答案

尝试这个

$(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>