如何使用 jquery 循环遍历 DOM 元素的文本并匹配变量的值？

Question

我正在使用 momentjs 来查找当前时间

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

我需要遍历 DOM 以将 currentHour 与 .hour 类的 div 中的文本相匹配。如果匹配，我需要应用一个名为“present”的 css 类来更改该 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>

Answer 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() 本质上是：text == "" + value + "" - 改为使用 .filter()。

更改.description

只是在后面定位描述的一种情况

更新：

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>