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

acdcjunior · Accepted Answer · 2020-03-05 17:36:04Z

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>

Chris L · Accepted Answer · 2020-03-05 17:41:10Z

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>

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related