jQuery select element by matching word in data attribute

Question

I have some divs like this:

<div class="item item1" data-tags="sky,sea,roads"></div>
<div class="item item2" data-tags="sea"></div>
<div class="item item3" data-tags="sky,roads"></div>
<div class="item item4" data-tags="roads"></div>

I am trying to make a filter with jQuery so that if I choose "sky", only item1 and item3 will be visible. Here is what I was trying:

$('body').on('click', '.photo-gallery > nav > ul > li > a', function (event) {
    var tag = $(this).data('tag');
    $('.item').not('.item[data-tags^="'+tag+'"]').fadeOut();
    $('.item[data-tags^="'+tag+'"]').fadeIn();
});

This works if the values of data-tags attribute are completely unique as my example above. But I know that it won't work if the tags are something like this:

<div class="item item1" data-tags="skyteck,sea,roads"></div>
<div class="item item2" data-tags="sky,blue sea,loanly roads"></div>

Now if I choose "sky" it will get bot item1 and item2 since they both match "sky". How can I solve this problem?

I have an idea to solve this, which is selecting all the items and then for each item make comma separated tags as array and then check if my tag is in that object. This will work, but will be somewhat slow. This will be my last option.

How often do you have to do this lookup? I would expect that you'd probably be just fine splitting the tags into arrays and looking through them, if you're only doing it a few times. — andyg0808
– andyg0808, Commented Sep 7, 2016 at 7:44
use attribute contains selector like $('.item[data-tags*="'+tag+'"]'). Only thing you need to keep in mind that this will treat tag like sky and bluesky as same. — vijayP
– vijayP, Commented Sep 7, 2016 at 7:44

Rory McCrossan · Accepted Answer · 2016-09-07 07:46:03Z

To achieve this you can use filter() to split() the tags and search for the given tag within the resulting array. Try this:

//$('body').on('click', '.photo-gallery > nav > ul > li > a', function (event) {
$('body').on('click', 'a', function(e) { // simplified for this example
  e.preventDefault();
  var tag = $(this).data('tag');
  $('.item').fadeOut().filter(function() {
    return $(this).data('tags').split(',').indexOf(tag) != -1;
  }).fadeIn();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item item1" data-tags="sky,sea,roads">sky, sea, roads</div>
<div class="item item1" data-tags="skyteck,sea,roads">skyteck, sea, roads</div>
<div class="item item2" data-tags="sea">sea</div>
<div class="item item3" data-tags="sky,roads">sea, roads</div>
<div class="item item4" data-tags="roads">roads</div>

<br /><br />

<a href="#" data-tag="sky">Sky</a>
<a href="#" data-tag="roads">Roads</a>
<a href="#" data-tag="sea">Sea</a>

Haresh Vidja · Accepted Answer · 2016-09-07 07:49:19Z

0

You can achieve this using filter() method Your js code should be

$('body').on('click', '.photo-gallery > nav > ul > li > a', function (event) {
    var tag = $(this).data('tag');
    $('.item[data-tags]').filter(function( index ) {
     var all_tags=$(this).data('tags').split(',');
     return !($.inArray( tag, all_tags) >= 0);
  }).fadeOut();
    $('.item[data-tags]').filter(function( index ) {
      var all_tags=$(this).data('tags').split(',');
      return $.inArray( tag, all_tags) >= 0;
  }).fadeIn();
});

answered Sep 7, 2016 at 7:49

Haresh Vidja

8,4713 gold badges29 silver badges44 bronze badges

Comments

rajiv · Accepted Answer · 2016-09-07 07:54:05Z

0

Try like this. "[data-tags*=" + tag+ "]", here adding *= it will find the string aproximatly matches. So,

       $('body').on('click', '.photo-gallery > nav > ul > li > a', function(event) {
       var tag = $(this).data('tag');
       $('.item').not("[data-tags*=" + tag+ "].item").fadeOut();
       $("[data-tags*=" + tag+ "].item").fadeIn();
       });

Hope this will work for you.

answered Sep 7, 2016 at 7:54

rajiv

741 silver badge6 bronze badges

Collectives™ on Stack Overflow

jQuery select element by matching word in data attribute

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related