Как использовать jquery для перебора текста элемента DOM и сопоставления со значением переменной?

ProgramBox

Как использовать jquery для перебора текста элемента DOM и сопоставления со значением переменной?

Post author:admin
Запись опубликована:25 января, 2022
Post category:Вопросы по программированию

#javascript #jquery #loops #dom #momentjs

Вопрос:

Я использую momentjs, чтобы найти текущий час

пусть currentHour = момент().формат(«хА»);

Мне нужно пройтись по DOM, чтобы сопоставить текущее значение с текстом в div с помощью .часовой урок. Если это совпадение, мне нужно применить класс css под названием «present», чтобы изменить стиль этого div.

 let currentHour = moment().format("hA");

  <div class="container">
        <!-- hourblocks go here -->
        <div id="hours" class="row time-block">
            <div class="col-md-1 hour">
                9AM
            </div>
            <textarea class="col-md-10 description"></textarea>
            <button class="col-md-1 saveBtn"><i class="fas fa-save"></i></button>

            <div class="col-md-1 hour">
                10AM
            </div>
            <textarea class="col-md-10 description"> </textarea>
            <button class="col-md-1 saveBtn"><i class="fas fa-save"></i></button>

            <div class="col-md-1 hour">
                11AM
            </div>
            <textarea class="col-md-10 description"></textarea>
            <button class="col-md-1 saveBtn"><i class="fas fa-save"></i></button>

            <div class="col-md-1 hour">
                12PM
            </div>
            <textarea class="col-md-10 description"></textarea>
            <button class="col-md-1 saveBtn"><i class="fas fa-save"></i></button>

            <div class="col-md-1 hour">
                1PM
            </div>
            <textarea class="col-md-10 description"></textarea>
            <button class="col-md-1 saveBtn"><i class="fas fa-save"></i></button>

            <div class="col-md-1 hour">
                2PM
            </div>
            <textarea class="col-md-10 description"></textarea>
            <button class="col-md-1 saveBtn"><i class="fas fa-save"></i></button>

            <div class="col-md-1 hour">
                3PM
            </div>
            <textarea class="col-md-10 description"></textarea>
            <button class="col-md-1 saveBtn"><i class="fas fa-save"></i></button>

            <div class="col-md-1 hour">
                4PM
            </div>
            <textarea class="col-md-10 description"></textarea>
            <button class="col-md-1 saveBtn"><i class="fas fa-save"></i></button>

            <div class="col-md-1 hour">
                5PM
            </div>
            <textarea class="col-md-10 description"></textarea>
            <button class="col-md-1 saveBtn"><i class="fas fa-save"></i></button>

 </div>
    </div>

Ответ №1:

Нет необходимости зацикливаться в традиционном смысле ( for / .each ), так как вы можете позволить селектору jquery найти нужную вам информацию:

 $(":contains("   value   ")")

в вашем случае это

 $(".hour:contains("   currentHour   ")")

сочетать с .addClass("present") дает:

 let currentHour = moment().format("hA");
$(".hour:contains("   currentHour   ")").addClass("present");

 .present{
  background-color: red;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

<div class="container">
  <!-- hourblocks go here -->
  <div id="hours" class="row time-block">
    <div class="col-md-1 hour">
      7AM
    </div>
    <textarea class="col-md-10 description"></textarea>
    <button class="col-md-1 saveBtn"><i class="fas fa-save"></i></button>
    <div class="col-md-1 hour">
      8AM
    </div>
    <textarea class="col-md-10 description"></textarea>
    <button class="col-md-1 saveBtn"><i class="fas fa-save"></i></button>
    <div class="col-md-1 hour">
      9AM
    </div>
    <textarea class="col-md-10 description"></textarea>
    <button class="col-md-1 saveBtn"><i class="fas fa-save"></i></button>

    <div class="col-md-1 hour">
      10AM
    </div>
    <textarea class="col-md-10 description"> </textarea>
    <button class="col-md-1 saveBtn"><i class="fas fa-save"></i></button>

    <div class="col-md-1 hour">
      11AM
    </div>
    <textarea class="col-md-10 description"></textarea>
    <button class="col-md-1 saveBtn"><i class="fas fa-save"></i></button>

    <div class="col-md-1 hour">
      12PM
    </div>
    <textarea class="col-md-10 description"></textarea>
    <button class="col-md-1 saveBtn"><i class="fas fa-save"></i></button>

    <div class="col-md-1 hour">
      1PM
    </div>
    <textarea class="col-md-10 description"></textarea>
    <button class="col-md-1 saveBtn"><i class="fas fa-save"></i></button>

    <div class="col-md-1 hour">
      2PM
    </div>
    <textarea class="col-md-10 description"></textarea>
    <button class="col-md-1 saveBtn"><i class="fas fa-save"></i></button>

    <div class="col-md-1 hour">
      3PM
    </div>
    <textarea class="col-md-10 description"></textarea>
    <button class="col-md-1 saveBtn"><i class="fas fa-save"></i></button>

    <div class="col-md-1 hour">
      4PM
    </div>
    <textarea class="col-md-10 description"></textarea>
    <button class="col-md-1 saveBtn"><i class="fas fa-save"></i></button>

    <div class="col-md-1 hour">
      5PM
    </div>
    <textarea class="col-md-10 description"></textarea>
    <button class="col-md-1 saveBtn"><i class="fas fa-save"></i></button>

  </div>
</div>

Для решения соответствующих вопросов в комментарии

содержит совпадения частичные совпадения

contains() по сути: текст == «» значение «» — вместо этого используйте .filter() .

измените .описание

это просто случай нахождения описания после

Обновленный:

 let currentHour = moment().format("hA");

$(".hour").filter(function() {
    return $(this).text().trim() === currentHour;
  })
  .nextAll(".description")
  .first()
  .addClass("present");
  
// don't use `.next(".description")` just `.next()` if it will always be the very next element

 .present {
  background-color: pink;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

<div class="container">
  <!-- hourblocks go here -->
  <div id="hours" class="row time-block">
    <div class="col-md-1 hour">
      7AM
    </div>
    <textarea class="col-md-10 description"></textarea>
    <button class="col-md-1 saveBtn"><i class="fas fa-save"></i></button>
    <div class="col-md-1 hour">
      8AM
    </div>
    <textarea class="col-md-10 description"></textarea>
    <button class="col-md-1 saveBtn"><i class="fas fa-save"></i></button>
    <div class="col-md-1 hour">
      9AM
    </div>
    <textarea class="col-md-10 description"></textarea>
    <button class="col-md-1 saveBtn"><i class="fas fa-save"></i></button>

    <div class="col-md-1 hour">
      10AM
    </div>
    <textarea class="col-md-10 description"> </textarea>
    <button class="col-md-1 saveBtn"><i class="fas fa-save"></i></button>

    <div class="col-md-1 hour">
      11AM
    </div>
    <textarea class="col-md-10 description"></textarea>
    <button class="col-md-1 saveBtn"><i class="fas fa-save"></i></button>

    <div class="col-md-1 hour">
      12PM
    </div>
    <textarea class="col-md-10 description"></textarea>
    <button class="col-md-1 saveBtn"><i class="fas fa-save"></i></button>

    <div class="col-md-1 hour">
      1PM
    </div>
    <textarea class="col-md-10 description"></textarea>
    <button class="col-md-1 saveBtn"><i class="fas fa-save"></i></button>

    <div class="col-md-1 hour">
      2PM
    </div>
    <textarea class="col-md-10 description"></textarea>
    <button class="col-md-1 saveBtn"><i class="fas fa-save"></i></button>

    <div class="col-md-1 hour">
      3PM
    </div>
    <textarea class="col-md-10 description"></textarea>
    <button class="col-md-1 saveBtn"><i class="fas fa-save"></i></button>

    <div class="col-md-1 hour">
      4PM
    </div>
    <textarea class="col-md-10 description"></textarea>
    <button class="col-md-1 saveBtn"><i class="fas fa-save"></i></button>

    <div class="col-md-1 hour">
      5PM
    </div>
    <textarea class="col-md-10 description"></textarea>
    <button class="col-md-1 saveBtn"><i class="fas fa-save"></i></button>

  </div>
</div>

1. Я попробовал это решение, и с этим связаны две проблемы. Во-первых, использование contain ошибочно выделяет 11 утра вместо 1 часа ночи (текущее время, я знаю, что его не существует, но все же), и во-вторых, я не думаю, что изначально указывал, но div, в котором мне нужно изменить стиль, — это класс .description, а не . часовой урок. Спасибо за быстрый ответ!

Метки: Как использовать jquery для перебора текста элемента DOM и сопоставления со значением переменной?