Получить первый элемент в списке, если атрибут равен значению - VUE. js - PullRequest
Новая
       9

Получить первый элемент в списке, если атрибут равен значению - VUE. js

0 голосов
/ 05 марта 2020

Я пытаюсь добавить класс в первый 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>

Проблема в том, что для первой итерации не добавляется класс в первый div с помощью attr2

Ответы [ 2 ]

1 голос
/ 05 марта 2020

Вы должны перебрать теги. Для каждого тега вы ищете элементы, которые имеют title, равный тегу. Когда вы найдете первый, вы останавливаете этот указанный тег c и переходите к следующему.

Обратите внимание, я использую for во внутреннем l oop, а не 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>
0 голосов
/ 05 марта 2020 

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