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

Question

我想查找 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。这可能吗？

Answer 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>