How to execute partial find on dynamic HTML5 data descriptor?

Question

I have a series of images tagged with HTML5 data descriptor "data-type2=[x]" where x is a number of different elements.

e.g.

    <img data-type2="pants" class="element" src="#>

I am trying to pass that data field into a jquery function that finds classes in another div (<div class="outfit-list") that has child divs tagged with classes such as:

    <div class="pants-001">
    <div class="pants-002">
    <div class="shoes-001">

etc.

Here is where I am stumped: how do I write a jquery function that accesses data type2 from the item I click (e.g. data-type2="pants"), finds all other divs under .outfit-list with classes that have, for example, "pants" in their class name "pants-002", and hide them? The function I have below does not work - I suspect that's because it's looking for the full name and not partial.

How do I make it perform a partial search to locate the classes that contain the term from data-type2?

        <script type="text/javascript">
            $(document).ready(function(){
             $('.thumbslist .element').click(function(){
                $('.outfit-list').find('.'+$(this).data('type2')).hide();
              });
            }); 
        </script>

score 1 · Answer 1 · answered Jul 13 '11 at 05:08

1

You can use the starts with selector. Something like

$(".thumbslist .element").click(function() {
    var type2 = $(this).data("type2");
    $(".outfit-list").find("div[class^=" + type2 + "]").hide();
});

answered Jul 13 '11 at 05:08

Chris

4,393
1
27
33

score 1 · Accepted Answer · answered Jul 13 '11 at 05:09

1

You can use the attribute contains selector, [attribute*="value"].

$('.outfit-list').find('[class*="' + $(this).data('type2') + '"]').hide();

answered Jul 13 '11 at 05:09

John Flatness

32,469
5
79
81

Thank you! This seems like the simplest solution of them all and now my function is working nicely. I am going to follow up on all the other replies soon and test each of them out as well to understand how they work. – mztwo Jul 13 '11 at 05:55

score 0 · Answer 3 · answered Jul 13 '11 at 05:08

0

This plugin adds support for data selectors: http://plugins.jquery.com/project/dataSelector

answered Jul 13 '11 at 05:08

Ilia Choly

18,070
14
92
160

score 0 · Answer 4 · answered Jul 13 '11 at 05:09

First of all, the jQuery .data() method is amazing: http://api.jquery.com/data/

You could do:

$("#img1").data('type', 'pants')
// Or whatever else you need to attach data to. You can do this dynamically too!

t = $("#img1").data('type')
// Recall that data at some point

$("div").each(function() {
  pat = new RegExp(t)
  if ($(this).attr('class').search(pat) !== -1) {
    $(this).hide()
  }
});

Or even better in Coffeescript

t = $("#img1").data 'type'
$("div").each ->
  if ($(@).attr('class').search new RegExp t) isnt -1 then $(@).hide()

score 0 · Answer 5 · edited May 23 '17 at 12:23

0

May be with something like in this other question

jQuery selector regular expressions

edited May 23 '17 at 12:23

Community

1
1

answered Jul 13 '11 at 05:12

sacabuche

2,781
1
27
35

kinakuta · Answer 6 · 2011-07-13T06:57:42.517

0

You could just grab the value of the attribute then use it in an attribute selector: http://jsfiddle.net/n73fC/1/

edited Jul 13 '11 at 06:57

answered Jul 13 '11 at 05:14

kinakuta

9,029
1
39
48

How to execute partial find on dynamic HTML5 data descriptor?

6 Answers6