jquery - 检查 div 是否包含与另一个 div 中的 aria-label 值相同的文本

Question

我有这样的html：

<h1 class="title">Floor 3</h1>

<div class="floor" aria-label="Floor 1>Bla bla</div>
<div class="floor" aria-label="Floor 2>Bla bla</div>
<div class="floor" aria-label="Floor 3>Bla bla</div>

如何检查 h1 文本是否等于 .floor aria-label 值？如果是这样，将类“.highlight”添加到.floor div？

标签： jquery

Answer 1

为此，您可以使用从元素中的匹配文本中filter()查找相关元素。.floorh1

$('.floor')
  .filter((i, el) => $(el).attr('aria-label') === $('h1').text())
  .addClass('highlight');

.highlight { color: #C00; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 class="title">Floor 3</h1>

<div class="floor" aria-label="Floor 1">Bla bla</div>
<div class="floor" aria-label="Floor 2">Bla bla</div>
<div class="floor" aria-label="Floor 3">Bla bla</div>