Вставка текста, если .next не соответствует другому элементу сразу после текущего элемента

Я хочу найти элемент 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. Это возможно?

Всего 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>


Основная проблема заключается в том, что вы имеете дело со всеми элементами 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>


Есть идеи?

10000