jQuery:查找部分 class 名称
jQuery: Finding partial class name
我想看看 <li>
是否有某个 class,问题是虽然它们都是唯一的,但都包含一个常量字符串 'unqID'。我想检查 <li>
是否有包含此字符串的 class,如果没有,则将新的 class 添加到 <li>
。我知道如何查明元素是否具有确切的 class 名称,但不知道如何查找部分 class 名称。
<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");
};
});
原答案
您可以使用
进行一些简单的部分检查
$('[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
附加信息
您可以参考 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>
此选择器将查找具有以文本开头的属性的元素。请注意,结果不包括这两个元素。这是因为第二个属性的文字 class 不是以 test 开头的。它从例子开始。 starts 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>
对ends with selector进行类似的操作。整个属性值被评估为有条件的,而不是每个 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>
包含字符串版本会在属性中的任何位置查找字符串是否存在,无论它是部分值还是完整值。
- 包含单词
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>
包含词选择器与包含文本选择器类似,只有一个区别。文本必须是整个单词,而不是部分文本。所以它在值中寻找两边都有一个space的字符串,除非它在值的开头或结尾,在对面有一个space使它成为一个非偏值。
我想看看 <li>
是否有某个 class,问题是虽然它们都是唯一的,但都包含一个常量字符串 'unqID'。我想检查 <li>
是否有包含此字符串的 class,如果没有,则将新的 class 添加到 <li>
。我知道如何查明元素是否具有确切的 class 名称,但不知道如何查找部分 class 名称。
<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");
};
});
原答案
您可以使用
进行一些简单的部分检查$('[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
附加信息
您可以参考 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>
此选择器将查找具有以文本开头的属性的元素。请注意,结果不包括这两个元素。这是因为第二个属性的文字 class 不是以 test 开头的。它从例子开始。 starts 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>
对ends with selector进行类似的操作。整个属性值被评估为有条件的,而不是每个 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>
包含字符串版本会在属性中的任何位置查找字符串是否存在,无论它是部分值还是完整值。
- 包含单词
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>
包含词选择器与包含文本选择器类似,只有一个区别。文本必须是整个单词,而不是部分文本。所以它在值中寻找两边都有一个space的字符串,除非它在值的开头或结尾,在对面有一个space使它成为一个非偏值。