Vue JS: Show div if its class matches another class on the page

Question

I would like the divs to show if the content contains the same word in both X and Y, otherwise I would like it to be hidden. So in the example below the first 2 Y elements would show and the others would be hidden.

Can anyone help with this, please?

 <div class="X">Apples</div>

 <div class="Y">Apples</div>
 <div class="Y">Apples, Bannanas, Pears</div>
 <div class="Y">Bannanas, Pears</div>
  <div class="Y">Pears</div> 


myCriteria() {
      var element = document.getElementsByClassName("X, Y");
      {
        if (X === Y) {
          element.style.display = "block";
        } else {
          element.style.display = "none";
        }
      }
    },

ehhc · Accepted Answer · 2021-07-15T14:32:18.123

2

Wow, you're completly violating VueJS...

I would suggest something like the following:

new Vue({
  el: "#app",
  data: {
    x: "Apples",
    y: [
      "Apples",
      "Apples, Bannanas, Pears",
      "Something else"
    ]
  },
  methods: {
    filteredDivs: function() {
      return this.y.filter(el => {
        let elementsInCurrentElement = el.split(',');
        for (let temp of elementsInCurrentElement) {
          if (temp.trim() === this.x) {
            return true;
          }
        }
      });
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div>
    {{x}}
  </div>
  <div v-for="element in filteredDivs()">
    {{element}}
  </div>
</div>

edited Jul 15 '21 at 14:32

answered Jul 15 '21 at 14:24

ehhc

537
5
14

Oh I feel shamed! Thanks for the code. Very much appreciated. – user13928344 Jul 15 '21 at 15:31
2

@user13928344 I see you have tendency of asking questions and not accepting or voting on any answers. 15, and only 2 accepted answers. You shouldn't be doing that, when accepting anwser apart from giving few points to to someone that took its time to help you are also marking the question solved for others. People here tend to spend there free time to help others, you should acknowledge that. – ikiK Jul 16 '21 at 11:11
My apologies to all. I'm will make sure I do in the future. – user13928344 Jul 20 '21 at 08:50

score 1 · Answer 2 · answered Jul 15 '21 at 14:24

The following function will do what you intend... Note that you will want to make the code more robust by adding error checking to ensure that there is exactly one element with class X; It would probably be better to use a specific element ID to find the filter source div as opposed to using a class. But that is up to you.

function myCriteria() {
  var elementListX = document.getElementsByClassName("X");
  var elementListY = document.getElementsByClassName("Y");

  var elementX = elementListX[0];
  for (var index = 0; index < elementListY.length; index++) {
    var element = elementListY[index];
    if (element.innerText.indexOf(elementX.innerText) >= 0) {
      element.style.display = "block";
    } else {
      element.style.display = "none";
    }
  }
}

<html>

<body onLoad="myCriteria()">
  <div class="X">Apples</div>

  <div class="Y">Apples</div>
  <div class="Y">Apples, Bannanas, Pears</div>
  <div class="Y">Bannanas, Pears</div>
  <div class="Y">Pears</div>
</body>

</html>

ikiK · Answer 3 · 2021-07-15T14:30:26.123

0

Like this?

This is only JS solution, You should not do this in Vue (and you haven't shown Vue app code at all). But as your attempt is only JS here is how you can do it as example:

This goes from basis you have multiple X, and search for Y, not other way around, as you did not specify that, but did mention in example.

[...document.querySelectorAll('.X')].forEach(x => {
  [...document.querySelectorAll('.Y')].forEach(y => {
    y.innerText.includes(x.innerText) ? y.style.display = "block" : y.style.display = "none"
  })
})

<div class="X">Apples</div>

<div class="Y">Apples</div>
<div class="Y">Apples, Bannanas, Pears</div>
<div class="Y">Bannanas, Pears</div>
<div class="Y">Pears</div>

Also: getElementsByClassName() with two classes getelementsbyclassname does not take 2 arguments.

edited Jul 15 '21 at 14:30

answered Jul 15 '21 at 14:24

ikiK

6,328
4
20
40

`querySelectorAll()` returns a **NodeList**. And by the [DOCS](https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach) `forEach` ***is*** a prototype (method) of `NodeList` - therefore you don't need to destructure. – Roko C. Buljan Jul 21 '21 at 03:18
Don't use `innerText` - use `textContent` instead. It's a common mistake since it's similar to `innerHTML` I know. – Roko C. Buljan Jul 21 '21 at 03:20
Also, you don't need to use O(n2) complexity. First get your `.X` string into a variable than iterate only over the `.Y` Elements. https://jsfiddle.net/9nx82smL/ same output, cleaner code - even if it has nothing to do with OP's question about using Vue. – Roko C. Buljan Jul 21 '21 at 03:26

Vue JS: Show div if its class matches another class on the page

3 Answers3