Блог

HTML:

 <!-- a class with a data-target attribute with a list of space-seperated values -->
<div class="class1" data-target="value1 value2 value3 ...">
    ...
</div>

<!-- and there might be more than one object with the same class but with same and/or different data-target values -->
<div class="class1" data-target="value4 value5 value2 ...">
    ...
</div>
 

jQuery ( jQuery ):

 // looping through each class1 to see if it contains a value and if so do something
$.each($('.class1'), function(){
    if ($(this)...) { // check if data-target of this specific object with class1 contains the value
        // do something
    }
});
 

чтобы проверить, содержит ли data-target этого конкретного объекта с class1 значение, я хочу что-то похожее на:

 element[data-target~="value5"]
 

но на $ (this)

Я пробовал:

 if ($(this).attr('[data-target~="value5"]')) ... // doesn't work (don't know why)

if ($('.class1[data-target~="value5"]')) ... // works but apply to all class1 objects and not just the specific one I'm testing

if ($(this).data('target').match('value5')) ... // works but is akin to *= and I want all the match options like ~= |= ^= etc.
 

но по какой-либо причине… Мне нужно иметь возможность применить что-то эквивалентное [data-target~=»value*»] к $(‘this’)

итак, 2 вопроса:

1. почему $(this).attr(‘[data-target~=»value5″]’) (или $ (this).attr(‘data-target~=»value5″‘), если на то пошло) не работает?
2. как мне делать то, что я хочу делать?

Некоторые методы jquery принимают a selector , а другие — нет.

.attr() не принимает селектор, поэтому вы не можете использовать [data-target] in .attr() , просто простую строку для имени атрибута, .attr("data-target") — так что это будет работать как ваш .data("target") пример, где вы используете js для проверки значения по мере необходимости.

Вместо этого вы можете использовать .is() или .filter() :

 if ($(this).is('[data-target~="value5"]'))
 

 $.each($('.class1'), function(){
    if ($(this).is("[data-target~='value3']")) { 
        console.log("yes it is");
    }
    else
        console.log("no it's not");
}); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="class1" data-target="value1 value2 value3">target</div>
<div class="class1" data-target="value1 value2 value5">target</div>