jquery - 在给定文本框的另一个跨度之后插入一个跨度

Question

在这个文本框之后，我有一个文本框和一个带有类星的跨度。我想在文本框的第一个跨度之后插入另一个跨度。

验证此字段后，我想在 span 类星之后插入错误消息 span。

使用以下代码，现在我的错误跨度被插入到文本框和跨度类星之间。

var v = 'Error message';
$('#group_name').after('<span class="error" style="color:#e03b3b">' + v + '</span>');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="form-control" name="group_name" id="group_name" placeholder="ENTER GROUP NAME" maxlength="100">
<span class="star">*</span>

标签： jqueryhtml

Answer 1

您可以使用“相邻兄弟”选择器 ( +) 来查找span以下#group_name字段：

let errTextboxClass = 'foo';
let v = 'Value';

$('#group_name + span').after('<span class="' + errTextboxClass + '" style="color:#e03b3b">' + v + '</span>');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="form-control" name="group_name" id="group_name" placeholder="ENTER GROUP NAME" maxlength="100">
<span class="star">*</span>

<input class="form-control" name="foo" id="foo" placeholder="ENTER FOO NAME" maxlength="100">
<span class="star">*</span>