如果 .next 与当前元素之后的另一个元素不匹配，则插入文本答案

【问题标题】：Inserting text if .next does not match another element immediately after current element如果 .next 与当前元素之后的另一个元素不匹配，则插入文本
【发布时间】：2020-01-16 00:08:50
【问题描述】：

我想查找 span 元素 _fieldName，如果它后面跟着一个 .mandatory span 元素，那么什么也不做。但是如果 _fieldName 后面没有跟 .mandatory span 元素，那么我想在 ._fieldName 元素之后立即添加一个文本字符串。这是 HTML：

<div class="container">
   <span class="_fieldName">Name</span>
   <span class="mandatory">*</span>
   <span class="_fieldName">Email address</span>
</div>

此代码有效：

<script>

if($("span._fieldName").next("span.mandatory").length > 0)

{
$("span._fieldName")
}
else {
$( "<p>(Optional)</p>" ).insertAfter( "span._fieldName" );
}

</script>

但它在每个 span._fieldName 之后添加（可选）。我只想在电子邮件地址字段之后添加它，因为它后面没有 span.mandatory。这可能吗？

【问题讨论】：

我想知道你为什么使用跨度。您是否将这些用作输入的标签？你能改变HTML吗？您可以轻松地让 CSS 添加 * 和可选文本，而无需在标记中添加 HTML 元素。
嗨，HTML 不可编辑 - 这是我们的表单平台呈现标签的方式。仅使用 CSS 是不可能做到这一点的，否则它也会将可选字段添加到必填字段中。

标签： javascript jquery html css

【解决方案1】：

使用：不!、.next()和.is()

$('._fieldName').each(function() {
  if( !$(this).next().is('.mandatory') ) {
    $(this).after('<p>(Optional)</p>');
  }
});

<div class="container">
  <span class="_fieldName">Name</span>
  <span class="mandatory">*</span>
  <span class="_fieldName">Email address</span>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

【讨论】：

【解决方案2】：

主要问题是您同时处理所有span._fieldName 元素。您需要遍历它们并单独检查它们以查看它们的下一个元素是什么。为此，您可以使用each()，如下所示：

$('span._fieldName').each(function() {
  if ($(this).next('span.mandatory').length == 0) {
    $("<p>(Optional)</p>").insertAfter(this);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <span class="_fieldName">Name</span>
  <span class="mandatory">*</span>
  <span class="_fieldName">Email address</span>
</div>

【讨论】：