jQuery: частичное совпадение hasClass

Question

При использовании Attribute Contains Word Selector должен оцениваться как true? Я пытаюсь использовать его в выражении if/else, подобном приведенному ниже, и оно не оценивается как true.

<li class="orange blue">
    <div class="answer">Some Content</div>
</li>
<input type="button" name="yellow" value="yellow" class="yellow" />
<br />
<input type="text" value="" class="result" />

$("input.yellow").click(function() {
    if ( $("div.answer").parent().hasClass($("[class~='bl']")) == true ){
        $("input.result").val("has class");
    } else {
        $("div.answer").parent().addClass("blue");
        $("input.result").val("class added")
    };
});

Скрипка

Answer 1

Как говорится в комментарии, hasClass принимает в string, чтобы вы могли использовать is:-

if ( $("div.answer").parent().is($("[class~='bl']"))){

или вы можете создать небольшой плагин jquery:

$.fn.hasPartialClass = function(partial){
  return new RegExp(partial).test(this.prop('class')); 
};

и использовать как:-

if ( $("div.answer").parent().hasPartialClass("bl")){

Answer 2

Вы забыли, что используете "Селектор слов, содержащий атрибуты". Поэтому для соответствия этому селектору необходимо использовать [class~='blue'], Вы не можете использовать [class~='bl']потому что атрибут class не содержит слово "bl", а слово "синий".

Способ использования этого селектора:

    $("input.yellow").click(function() {
    if ( $("div.answer").parent().is("[class~='blue']") ){
        $("input.result").val("has class");
    } else {
        $("div.answer").parent().addClass("blue");
        $("input.result").val("class added")
    };
});