how to use a string of attributes to select elements using Jquery

Question

I'll try to word this in a way that is understandable, but finding it hard to search for answers when it's difficult to put into words what I am trying to achieve(the woes of being new to web dev, but still having fun).

I have a bunch of div's that contain reviews, and wish to be able to select tags in list in another div that will then add a hide class to all reviews that do not have one of the "selectedTags". I am storing the tags for each review in the reviews "data-tags" attribute

<div class="reviewTile" data-tags="montana sky morning clouds">
  <a href="/review/5c12a0a2e8c8f2111300c903">
    <img class="imgThumb" src="/media/reviews/1.jpg" alt="where are you Image.???">
    <div class="reviewTextSample">
       <p>Here is my first review to see what it will look like and if this will actually work.</p><span class="readMore">...read more</span>
  </div></a>
</div>


<div class="reviewTile" data-tags="wyoming clouds travel park">
  <a href="/review/5c12a0a2e8c8f2111300c904">
    <img class="imgThumb" src="/media/reviews/2.jpg" alt="where are you Image.???">
    <div class="reviewTextSample">
       <p>Here is my Second review to see what it will look like and if this will actually work.</p><span class="readMore">...read more</span>
  </div></a>
</div>

The problem is, I can't figure out how to search my review divs and return the divs that have any one of the selected tags.

Here is some jquery that runs when you click one of the Tag's in the tag div, which is just a list of every tag in the database. Each tag has the class of .tagText.

$(".tagText").click( function(){
  //Add selectedTag class to the recently clicked tag so we know it is selected
  $(this).toggleClass("selectedTag");

//Find all tags that are selected
var selectedTags = [];

$(".tagText.selectedTag").each( function(){
 //Store tags in selectedTags array
 selectedTags.push( $(this).html().trim() );
 //selectedTags += $(this).html().trim() + ",";
});  

//Find all elements that do not contain one of the selected tags
//Hide those elements by adding .hide class and scale width to 0

$( ".reviewTile").not("[data-tags*='"+selectedTags+"']" ).addClass("hide");
$( ".reviewTile").not("[data-tags*='"+selectedTags+"']" ).css("width", 0);


console.log("Tags array contains: " + selectedTags);
});

This only really works the first time you select a tag. What I cant figure out is how to use the "selectedTags" array when searching the attributes. Is this something that .map() would help out with.?

I am pretty new to web dev in general and not well versed in a lot of the lingo and language so any help is appreciated. Been searching for a few days now and have found a lot of helpful information, but cant find anything about trying to match elements with a list of attributes in an array or space separated string.

The end goal is that anytime you click on an new tag or click on an already selected tag, deselecting it, the .click() code runs, finds all tags that are currently "selected" and then adds the .hide class to all the review divs that do not have any of the selected tags in their data-tags attribute.

I dont know if it will complicate things since some reviews will have overlapping tags, as in the example, both reviews have "clouds" in the tags so if you select the clouds tag I need both to display, if you then add the "montana" tag then they both still stay visible, but if you then deselect the "clouds" tag, the second review would now have the .hide class applied and disappear.

If anyone has a jquery solution, great, already using it. If you have a plain JS approach, i will love to see it too.

Answer 1

The part you need here is

var Exp = new RegExp('\\b('+selectedTags.join('|')+')\\b');
  $('.reviewTile').hide().filter(function(){
    return $(this).attr('data-tags').search(Exp) > -1;
  }).show();

simple example

$(document).ready(function(){
  //Find all tags that are selected
  var selectedTags = ['wyoming' , 'sky'];
  var Exp = new RegExp('\\b('+selectedTags.join('|')+')\\b');
  $('.reviewTile').hide().filter(function(){
    return $(this).attr('data-tags').search(Exp) > -1;
  }).show();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="reviewTile" data-tags="montana sky morning clouds">
  <a href="/review/5c12a0a2e8c8f2111300c903">
    <img class="imgThumb" src="/media/reviews/1.jpg" alt="where are you Image.???">
    <div class="reviewTextSample">
       <p>Here is my first review to see what it will look like and if this will actually work.</p><span class="readMore">...read more</span>
  </div></a>
</div>


<div class="reviewTile" data-tags="wyoming clouds travel park">
  <a href="/review/5c12a0a2e8c8f2111300c904">
    <img class="imgThumb" src="/media/reviews/2.jpg" alt="where are you Image.???">
    <div class="reviewTextSample">
       <p>Here is my Second review to see what it will look like and if this will actually work.</p><span class="readMore">...read more</span>
  </div></a>
</div>

REF: Jquery search word in string

Answer 2

Here's a simplified version of what you want to achieve, assuming there is one tag button with id of button and its innerHTML is the tag name:

var button = document.getElementById("button");
button.onclick = function() {
  var divs = document.getElementsByTagName("DIV");
  for(var i = 0; i < divs.length; i++) {
    if(!divs[i].getAttribute("data-tags").includes(this.innerHTML)) {
      divs[i].classList.add("hide");
    }
  }
}

Here we are searching each div's data-tags attribute, and if it does not contain the button's innerHTML, it gets the class of hide.

I guess you could easily build up from this example to get what you want. Hope it helps!