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

Question

如果属性值相等，我正在尝试向第一个 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>

我的代码：

const tags = ['attr1', 'attr2']

const collection = document.getElementByClassName("list__item")

// convert colelction into array
const arr = [...collection]

arr.forEach(el => {
    this.tags.forEach(tag => {
        if(tag == el.attributes.attr1.value) {
            document.querySelector(".list__item").classList.add('active')
        }
    })
})

我得到的是：

<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>

问题是，对于第一次迭代，它没有使用 attr2 将类添加到第一个 div

Answer 1

您应该遍历标签。 对于每个标签，您搜索title与标签相同的元素。 当您找到第一个时，您停止该特定标签并继续下一个。

注意我在内循环中使用for ，而不是forEach 。 这是因为return停止了标签的处理。

 const tags = ['attr1', 'attr2'] const collection = document.getElementsByClassName("list__item") // convert colelction into array const arr = [...collection] tags.forEach(tag => { for(const el of arr) { if (tag === el.getAttribute('title')) { el.classList.add('active') return; } } })

 .active { color: red }

 <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>

Answer 2

 const tags = ['attr1', 'attr2'] const collection = document.getElementsByClassName("list__item") // convert colelction into array const arr = [...collection] //document.querySelector will always pick the first instance of a selector, even when 2 or more are present //so for each tag, we can just find the first element with the title, and set that class for( let tag of tags){ let node = document.querySelector(`[title="${tag}"]`); node.classList.add("active"); }

 <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>