jQuery:查找部分类名[重复]

2023-11-25

我想看看是否<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");
    };
});

jsFiddle


原答案

您可以使用以下命令进行一些简单的部分检查

$('[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>

该选择器将查找具有以文本开头的属性的元素。请注意,结果不包括这两个元素。这是因为第二个的字面类属性不以 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>

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

jQuery:查找部分类名[重复] 的相关文章

  • Angular JS未知提供者错误

    删除 Bower components 并清理缓存后 我使用 Bower install 重新安装了依赖项 该应用程序无法加载并出现以下错误 未捕获的错误 injector unpr 未知提供程序 forceReflowProvider 这
  • 如何确保循环完成后执行语句?

    下面是我的代码的快照 routes index js exports index function req res var results new Array for var i 0 i lt 1000 i do database quer
  • ES6 在defineAsyncComponent 中命名导入

    我想异步加载我的网络应用程序的一些元素 这是旧的导入 import Popover PopoverButton PopoverPanel from headlessui vue export default components Popov
  • 在 vuejs 上将 \n 替换为新行

    我正在尝试将 n 字符替换为来自端点的数据的新行 I tried p item licensedocument legal documentText replace r n r n g br p 并没有奏效 当我将replace 写入问题末
  • 动画和过渡的组合无法正常工作

    我一直在尝试添加一些基本的 CSS3 动画 目标是在按钮的单击事件上切换类 并根据添加的类对 div 进行动画处理 该代码对于 Firefox 中切换的第一次迭代完美运行 但对于 Chrome 等其他浏览器以及 Firefox 中的下一次迭
  • YouTube 播放器 API:getDuration()、getCurrentTime()、getVideoData() 不起作用

    对于我的应用程序 我尝试使用 YouTube Iframe 播放器 API 来播放视频 并允许用户更改视频而无需重新加载页面 我通过使用来实现这一点player loadVideoById video id 方法 通过YouTube视频id
  • Disqus:使用 jQuery 成功后更改标题

    Disqus 根据请求自动放置定义的标题 例如 添加新评论 我尝试在ready 上使用jquery更改它的值 dsq new post h3 text Paticipa con tu cuenta favorita 没有成功 我如何知道 d
  • 为什么使用 MarkForCheck() 和 setTimeout?

    我对 ChangeDetectorRef 中的 MarkForCheck 方法有疑问 对于一种用法我必须使用this cd markForCheck 因为在控制台中我获取了值 但它没有在视图上更新 setTimeout gt this ch
  • IE 中的 jQuery 鼠标闪烁

    当我在 IE 中执行 fadeIn fadeOut slideUp slideDown toggle 等 jQuery 函数时 鼠标总是闪烁 沙漏在光标旁边的视图中快速闪烁 我尝试了不同的方法来在动画进行时完全隐藏鼠标 但没有效果 而且在大
  • 向Java类库添加函数

    我使用的 Java 类库在很多方面都不完整 有很多类我认为应该内置其他成员函数 但是 我不确定添加这些成员函数的最佳实践 让我们调用不足的基类A class A public A long arbitrary arguments publi
  • Ace Editor 自动完成和多种语言

    如何为 Ace 编辑器创建自动完成功能以及如何突出显示 php 中的 html javascript 和 csshttp ace ajax org http ace ajax org
  • onDeviceReady 未在 PhoneGap hello world 应用程序中触发

    我正在尝试做一个简单的警报 测试 应用程序 但事件没有被触发 这是代码 function onLoad document addEventListener deviceready onDeviceReady false Cordova is
  • 将 async 和await 与export const 一起使用

    我无法完成这项工作 它说 await 是一个保留字 是的 当然是 而且我想使用它 怎么了 export const loginWithToken async gt return dispatch gt dispatch type SESSI
  • 带数字键的 Immutable.js 映射(包括性能测试)

    我在 React Native 应用程序中将 Immutable js 与 Redux 结合使用 元数据 例如查找表 是从服务器获取的 并作为 Immutable Map 保存在应用程序本地 查找值的键是整数 数据库中的主键 当我获取数据时
  • 为什么间接更改复选框时不会触发复选框上的 onchange

    我使用 Prototype 来监视复选框 因此我可以向它们添加 javascript 检查 当单击复选框所在的 tr 或 td 时 应选中该复选框 当您直接单击复选框时 会触发 onchange 事件 因此您会收到警报 当 javascri
  • 如何比较 JavaScript 表格中的单元格并测试是否相等? indexOf 是如何工作的?

    我在 HTML 代码中创建了一个表格 它有 9 列和 13 行 它被 JavaScript 循环完全填满 该循环用几个数组中的人名填充它 但是 我想添加一个验证步骤 确保一行中没有两个单元格具有相同的值 并且每个单元格的值不会在其正下方的单
  • Web API 2.0 使用 pascalcase 模型接收驼峰式命名的 JSON 数据

    我正在尝试对我的 Web API 进行 PUT 调用 我在 WebApiConfig cs 中设置了以下内容 以处理以驼峰形式将数据发送回我的 Web 项目 config Formatters JsonFormatter Serialize
  • Tizen SDK:找不到变量:tizen

    我正在尝试使用 Tizen SDK 创建一个 Web 应用程序 当我启动应用程序时 一切都很好 但是当我在模拟器上按 后退 按钮时 没有任何反应 并且我看到一条消息 55435 js main js 9 ReferenceError 找不到
  • iPhone Mobile Safari:强制键盘打开

    这是一个 HTML CSS JS jQuery iPad 应用程序 我有一个按钮 可以向下滑动输入表单 我想让用户将注意力集中在输入上 然后启动键盘 这是我正在处理的 但不起作用 myFormField focus 这确实集中了输入 但无法
  • 使用 ASP.Net 和 Ajax 的登录页面

    我正在尝试使用 html ajax 和 ASP NET 制作登录页面 数据确实传递给 ajax 函数 但是当我调试 asp 页面时 用户名和密码以 NULL 发送 该代码应该获取用户名和密码 然后返回用户 ID html页面 div Use

随机推荐