jQuery：查找部分类名

Question

我想看看<li>是否有某个类，但是它们都是唯一的，但都包含一个常量字符串'unqID'。我想查看<li>是否有包含此字符串的类，如果没有，请将新类添加到<li>。我知道如何找出一个元素是否具有确切的类名但不知道如何查找部分类名。

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

$("input.yellow").click(function() {
    // CREATE UNIQUE CLASS ID
    var d = new Date();
    var n = d.getTime();
    var unq = "unqID" + n;

    //CHECK TO SEE IF LI ALREADY HAS THE UNIQUE CLASS
    if ($("div.answer").parent().hasClass("unqID")){
        $("input.result").val("has class");
    } else {
        $("div.answer").parent().addClass(unq);
        $("input.result").val("class added");
    };
});

The jsFiddle

Answer 1

原始答案

您可以使用

进行一些简单的部分检查

$('[class^="value"]') <-- starts with string
$('[class$="value"]') <-- ends with string
$('[class~="value"]') <-- i believe this is the contains string version

其他信息

您可以参考https://api.jquery.com/category/selectors/获取有关api已经过期的某些选择器的一些文档。但是，我会在这里包括其中一些。

• 从
开始

＆＃13;

＆＃13;

console.log( $('[class^="test"]').get() );

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test1 example1"></div>
<div class="example2 test2"></div>

＆＃13;

＆＃13;

＆＃13;

此选择器将查找具有以文本开头的属性的元素。请注意，结果不包括这两个元素。这是因为第二个的文字类属性不是以test开头的。它以示例开头。选择器的启动不会针对属性中的每个单词进行评估。它取消了整个属性值。

• 结束

＆＃13;

＆＃13;

console.log( $('[class$="t2"]').get() );

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test2 example1"></div>
<div class="example2 test2"></div>

＆＃13;

＆＃13;

＆＃13;

使用选择器对结束执行类似的操作。为条件而不是每个类评估整个属性值。

• 包含字符串

＆＃13;

＆＃13;

console.log( $('[class*="test"]').get() );

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test1 example1"></div>
<div class="example2 test2"></div>

＆＃13;

＆＃13;

＆＃13;

包含字符串版本会查找字符串中属性的任何位置，无论它是部分值还是完整值。

• 包含Word

＆＃13;

＆＃13;

console.log( $('[class~="test"]').get() );

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test1 example1"></div>
<div class="example2 test2"></div>
<div class="example test"></div>

＆＃13;

＆＃13;

＆＃13;

包含单词选择器与包含文本选择器类似，但有一个区别。文本必须是整个单词，而不是部分文本。因此它在值中查找一个字符串，在其两侧都有一个空格，除非它位于值的开头或结尾，而另一侧的空格使其成为非部分值。