Get first element in the list if the attribute is equal value - VUE.js

Question

I'm trying to add a class to the first div if the attribute is equal value.

What I have:

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

What I'm trying to achieve is:

What I have:

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

My code:

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')
        }
    })
})

What I'm getting is:

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

The problem is that for the first iteration it's not adding the class to the first div with attr2

Answer 1

You should iterate over the tags. For each tag, you search for elements that have title equal to the tag. When you find the first one, you stop that specific tag and proceed to the next one.

Notice I use for in the inner loop, not forEach . This is because of the return , which stops the processing of the tag.

 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>