jQuery:查找部分类名称 [英] jQuery: Finding partial class name

问题描述

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

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

jsFiddle

推荐答案

原始答案

您可以使用以下方法进行一些简单的局部检查

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

其他信息

您可以引用 https://api.jquery.com/category/selectors/有关api选择器的某些选择器的一些文档.但是，我将在其中包括其中的一些.

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.

• 开始于

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>

此选择器将查找具有以文本开头的属性的元素.请注意，结果不同时包含两个元素.这是因为第二个类的文字类属性不是以test开头的.它从示例开始.开头选择器不会针对属性中的每个单词求值.它超出了整个属性值.

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.

• 以
结尾

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.

• 包含字符串

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.

• 包含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.

这篇关于jQuery:查找部分类名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！