javascript jQuery：查找部分类名

jQuery: Finding partial class name

提问by pn03

I want to see if an <li>has a certain class, the catch is though that they all are unique but all contain a constant string of 'unqID'. I want to check to see if the <li>has a class that contains this string and if it does not, add the new class to the <li>. I know how to find out if an element has an exact class name but do not know how to find partial class names.

我想看看<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

jsFiddle

回答by Taplar

Original Answer

原答案

You can do some simple partial checking with

你可以做一些简单的部分检查

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

Additional Information

附加信息

You can reference https://api.jquery.com/category/selectors/for some documentation on some selectors the api has explinations for. However, I'll include a few of them here.

您可以参考https://api.jquery.com/category/selectors/以获取有关 api 有解释的某些选择器的一些文档。但是，我将在此处包括其中的一些。

• Starts With

• 以。。开始

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

<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>

This selector will find elements that have an attribute that starts with the text. Note that the result does not include both elements. This is because the literal class attribute for the second one does not start with test. It starts with example. The starts with selector does not evaluate against each word in the attribute. It goes off the entire attribute value.

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

• Ends With

• 以。。结束

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

<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>

A similar operation is performed for the ends with selector. The entire attribute value is evaluated for the conditional, not each class.

对带有选择器的末端执行类似的操作。整个属性值是针对条件而不是每个类进行评估的。

• Contains String

• 包含字符串

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

<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>

The contains string version does look for the existance of the string any where in the attribute, regardless of if it is a partial or full value.

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

• Contains Word

• 包含单词

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

<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>

The contains word selector is similar to the contains text selector, with one distinction. The text must be an entire word, not partial text. So it looks for a string in the value that has a space on both sides of it, unless it is at the beginning or end of the value, with a space on the opposite side to make it a non-partial value.

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