Вставка текста, если .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

Основная проблема в том, что вы имеете дело со всеми span._fieldName элементами одновременно. Вам нужно пройти через них oop и проверить их по отдельности, чтобы увидеть, каков их следующий элемент. Для этого вы можете использовать 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>

Answer 2

Использование: не !, .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>