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

问题描述

我想看看

是否有某个类，问题是它们都是唯一的，但都包含一个常量字符串unqID".我想检查

是否有一个包含此字符串的类，如果没有，请将新类添加到

.我知道如何找出一个元素是否有一个确切的类名，但不知道如何找到部分类名.

<div class="answer">一些内容</div>
<input type="button" name="yellow" value="yellow" class="yellow"/><input type="text" value="" class="result"/>$("input.yellow").click(function() {//创建唯一的类 IDvar d = 新日期();var n = d.getTime();var unq = "unqID" + n;//检查 LI 是否已经拥有唯一类if ($("div.answer").parent().hasClass("unqID")){$("input.result").val("有类");} 别的 {$("div.answer").parent().addClass(unq);$("input.result").val("添加的类");};});

jsFiddle

解决方案

原答案

你可以用

做一些简单的部分检查

$('[class^=value"]') <-- 以字符串开头$('[class$="value"]') <-- 以字符串结尾$('[class~="value"]') <-- 我相信这是包含字符串版本$('[class*="value"]') <-- 用于匹配包含给定子字符串的元素

附加信息

您可以参考https://api.jquery.com/category/selectors/ 对于某些选择器的一些文档，api 有解释.不过，我会在此处列出其中一些.

• 开始于

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 开头的.它从示例开始.开头选择器不会针对属性中的每个单词进行评估.它脱离了整个属性值.

• 以
结尾

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>

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

• 包含字符串

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>

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

• 包含单词

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>

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

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

The 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
$('[class*="value"]') <-- is what you would use to match an element containing the given substring

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.

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

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

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