Как выполнить частичный поиск по динамическому дескриптору данных HTML5?

Question

У меня есть серия изображений, помеченных дескриптором данных HTML5 "data-type2 = [x]", где x - это количество различных элементов.

, например

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

Я пытаюсь передать это поле данных в функцию jquery, которая находит классы в другом div (<div class="outfit-list"), у которого есть дочерние div, помеченные такими классами, как:

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

и т.д.

Вот где я озадачен: как мне написать функцию jquery, которая обращается к типу данных 2 из элемента, который я нажимаю (например, data-type2 = "брюк"), находит все остальные элементы div в .outfit-list с классами, которые имеют Например, «штаны» в своем классе называют «штаны-002», и скрывать их? Приведенная ниже функция не работает - я подозреваю, что это потому, что она ищет полное имя, а не частичное.

Как заставить его выполнить частичный поиск, чтобы найти классы, содержащие термин из data-type2?

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

Answer 1

Вы можете использовать атрибут , содержащий селектор , [attribute*="value"].

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

Answer 2

Вы можете использовать селектор starts with.Что-то вроде

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

Answer 3

Вы можете просто получить значение атрибута, а затем использовать его в селекторе атрибута: http://jsfiddle.net/n73fC/1/

Answer 4

Может быть с чем-то, как в этом другом вопросе

Регулярные выражения селектора jQuery

Answer 5

Прежде всего, метод jQuery .data () поразителен: http://api.jquery.com/data/

Вы можете сделать:

$("#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()
  }
});

Или еще лучше в Coffeescript

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

Answer 6

Этот плагин добавляет поддержку селекторов данных: http://plugins.jquery.com/project/dataSelector