Javascript 如果属性值相等，则获取列表中的第一个元素-VUE.js

如果属性值相等，我将尝试向第一个div添加一个类

我所拥有的：

<div class="list">
    <div class="list__item" title="attr1">value 1</div>
    <div class="list__item"  title="attr1">value 2</div>
    <div class="list__item"  title="attr2">value 3</div>
    <div class="list__item"  title="attr2">value 4</div>
    <div class="list__item"  title="attr2">value 5</div>
    <div class="list__item"  title="attr2">value 6</div>
    <div class="list__item"  title="attr2">value 7</div>
</div>

<div class="list">
    <div class="list__item" title="attr1" class="active">value 1</div>
    <div class="list__item"  title="attr1">value 2</div>
    <div class="list__item"  title="attr1">value 3</div>
    <div class="list__item"  title="attr2" class="active">value 3</div>
    <div class="list__item"  title="attr2">value 4</div>
    <div class="list__item"  title="attr2">value 5</div>
    <div class="list__item"  title="attr2">value 6</div>
</div>

我得到的是：

<div class="list">
    <div class="list__item" title="attr1" class="active">value 1</div>
    <div class="list__item"  title="attr1">value 2</div>
    <div class="list__item"  title="attr1">value 3</div>
    <div class="list__item"  title="attr2">value 3</div>
    <div class="list__item"  title="attr2">value 4</div>
    <div class="list__item"  title="attr2">value 5</div>
    <div class="list__item"  title="attr2">value 6</div>
</div>

值1
价值2
价值3
价值3
价值4
价值5
价值6

---

问题是，对于第一次迭代，它没有使用attr2将类添加到第一个div中，您应该迭代标记。对于每个标记，您将搜索

title

与标记相等的元素。找到第一个标记后，停止该特定标记并继续下一个标记

注意，我在内部循环中使用

for

，而不是

forEach

。这是因为

返回

，它停止了标记的处理

const标记=['attr1'，'attr2']
const collection=document.getElementsByClassName（“列表项”）
//将collection转换为数组
常量arr=[…集合]
tags.forEach（tag=>{
用于（arr的常数）{
if（tag==el.getAttribute（'title'））{
el.classList.add（'active'）
返回；
}
}
})

.active{color:red}

值1
价值2
价值3
价值4
价值5
价值6
价值7

const标记=['attr1'，'attr2']
const collection=document.getElementsByClassName（“列表项”）
//将collection转换为数组
常量arr=[…集合]
//document.querySelector将始终选择选择器的第一个实例，即使存在2个或更多实例
//因此，对于每个标记，我们只需找到标题为的第一个元素，并设置该类
for（让标签中的标签）{
让节点=document.querySelector（`[title=“${tag}”]`）；
node.classList.add（“活动”）；
}

值1
价值2
价值3
价值4
价值5
价值6
价值7

<div class="list">
    <div class="list__item" title="attr1" class="active">value 1</div>
    <div class="list__item"  title="attr1">value 2</div>
    <div class="list__item"  title="attr1">value 3</div>
    <div class="list__item"  title="attr2">value 3</div>
    <div class="list__item"  title="attr2">value 4</div>
    <div class="list__item"  title="attr2">value 5</div>
    <div class="list__item"  title="attr2">value 6</div>
</div>