Получить каждый абзац с указанным c id в теле и внести изменения в другой абзац

Question

Я хочу проверять каждый p с указанием c id в body, и когда он будет пустым, он будет печатать Open, в другой абзац id, в противном случае, если обнаружит текст, будет напечатано Closed.

$('#provlepsi').each(function(index) {
  if (jQuery('#provlepsi').is(':empty')) {
    // we're empty. do stuff.
    jQuery("#open-game").text("Open");
  } else {
    jQuery("#open-game").text("Closed");
  }
});

<div class="game-wrapper">
  <?php while ( have_rows('live_game') ) : the_row();  ?>
    <div class="col-145">
      <p>
        <? the_sub_field('home_omada');  ?>
      </p>
    </div>
    <div class="col-145">
      <p>
        <? the_sub_field('opponent_team');  ?>
      </p>
    </div>
    <div class="col-145">
      <p>
        <? the_sub_field('lepto_protashs');  ?>
      </p>
    </div>
    <div class="col-145">
      <p>
        <? the_sub_field('score');  ?>
      </p>
    </div>
    <div class="col-145">
      <p id="provlepsi">
        <? the_sub_field('provlepsi_live_game');  ?>
      </p>
    </div>
    <div class="col-145">
      <p>
        <? the_sub_field('epityxia_agwna_live_game');  ?>
      </p>
    </div>
    <div class="col-145">
      <p id="open-game"></p>
    </div>
  <? endwhile; ?>
</div>

Answer 1

Первая проблема заключается в том, что вы дублируете атрибуты id в l oop. Они имеют , чтобы быть уникальными в DOM. Чтобы исправить это, используйте классы и обойдите DOM, чтобы связать элементы друг с другом.

Имея это в виду, вы можете выбрать элементы .open-game напрямую и предоставить функцию для text(), которая возвращает их содержимое на основе их связанные .provlepsi. Попробуйте это:

$('.open-game').text(function() {
  var $wrapper = $(this).closest('.game-wrapper');
  return $wrapper.find('.provlepsi').is(':empty') ? 'Open' : 'Closed';
});

.game-wrapper {
  border: 1px solid #CCC;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="game-wrapper">
  <div class="col-145">
    <p class="provlepsi">provlepsi_live_game</p>
  </div>
  <div class="col-145">
    <p>epityxia_agwna_live_game</p>
  </div>
  <div class="col-145">
    <p class="open-game"></p>
  </div>
</div>
<div class="game-wrapper">  
  <div class="col-145">
    <p class="provlepsi"></p>
  </div>
  <div class="col-145">
    <p>epityxia_agwna_live_game</p>
  </div>
  <div class="col-145">
    <p class="open-game"></p>
  </div>
</div>

Обратите внимание, что в HTML были внесены незначительные изменения, так что каждый .game-wrapper содержит только одну игру, а не несколько.

Также помните, что вам не нужно содержать пробелы в элементе, когда вы собираетесь проверить его с помощью :empty, поэтому убедитесь, что вы правильно отформатировали вывод HTML / PHP, как показано выше.

В этом коде как правильно добавить класс, если он пуст?

Для одновременного добавления класса к элементу необходимо использовать полный each() l oop вместе с toggleClass, вот так:

$('.open-game').each(function() {
  var $game = $(this);
  var $wrapper = $game.closest('.game-wrapper');
  var isEmpty = $wrapper.find('.provlepsi').is(':empty');
  $game.text(isEmpty ? 'Open' : 'Closed').toggleClass('foo', isEmpty);
});