如何使用 jQuery 引用非触发元素的兄弟元素？

Question

我正在使用下面的 jQuery 在单击“#button”时验证输入字段并在输入为空时显示警报。但是我想对其他多个输入做同样的事情，并希望避免创建唯一的 ID 并为每个输入重复此代码，因为有很多。

<script>
$('#button').click(function(e) {
     
if ($('#input').val().length !=0){
   $('#alert').hide();
} else {
   $("#alert").show();
}
});
</script>

.alert {
display: none;
}

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>


<input type="text" id="input1" name="fname"><br>
<p class="alert" id="alert">This field is required</p>

<input type="text" id="input2" name="lname"><br><br>
<p class="alert" id="alert">This field is required</p>
 
<input type="button" id="button" value="Submit">

警报元素是输入的同级元素，因此我认为可以独立定位每个 input/alert 的一种方法是将警报作为输入的同级元素引用，例如类似于下面的内容，但这仅引用触发按钮的兄弟姐妹，而不是预期的输入兄弟姐妹。如何实现？

$(this).siblings('#alert').show();

Answer 1

$('#button').click(function(e) {
  $('input').each((i,x)=>{
    let v=$(x).val();
    let a=$(x).closest(".input-group").find(".alert");
    if(v==undefined || v==null || v=="")
      $(a).show();
    else
      $(a).hide();
  });
});

.alert {
display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<div class="input-group">
  <input type="text" id="input1" name="fname"/>
  <span class="alert" id="alert">This field is required</span>
</div>

<div class="input-group">
  <input type="text" id="input2" name="lname"/>
  <span class="alert" id="alert">This field is required</span>
</div>

<input type="button" id="button" value="Submit"/>

如何使用 jQuery 引用非触发元素的兄弟元素？

How to reference a sibling of a non-trigger element using jQuery?

validation

jquery

siblings

jquery-selectors