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

【问题标题】：Get first element in the list if the attribute is equal value - VUE.js如果属性值相等，则获取列表中的第一个元素 - VUE.js
【发布时间】：2023-03-14 17:56:01
【问题描述】：

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

【问题讨论】：

标签： javascript html loops dom css-selectors

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：