如何用jQuery选择含两个指定单词的类并仅修改首个匹配元素？

当然可以搞定这个需求！我来一步步给你讲清楚怎么实现，完全贴合你的要求：

核心思路 #

要选择**类名中任意位置同时包含"cats"和"dogs"**的元素，再锁定第一个匹配项，我们可以结合jQuery的属性选择器和过滤方法来实现。

1. 基础场景：class属性中同时包含两个关键词 #

如果你的需求是：只要元素的class属性里（不管是单个类名包含两个词，还是多个类分别包含）同时有"cats"和"dogs"，就可以用这种最简单的写法：

// 选中第一个符合条件的元素，修改背景色
$('[class*="cats"][class*="dogs"]:first').css('background-color', 'yellow');

或者用更灵活的.first()方法（推荐，比伪选择器兼容性更好）：

// 给首个匹配元素添加高亮类
$('[class*="cats"][class*="dogs"]').first().addClass('highlight');

• [class*="cats"]：匹配class属性中**任意位置包含"cats"**的元素，*=是jQuery的包含匹配符
• 连写[class*="cats"][class*="dogs"]：表示同时满足两个包含条件的元素
• :first 或 .first()：从匹配集合中取出第一个元素

举个HTML例子：

<div class="only-cats">只含cats</div>
<div class="cats-and-dogs">同时含两个词（单个类）</div>
<div class="dogs-with-cats">同时含两个词（单个类）</div>
<div class="cats pets dogs">同时含两个词（多个类）</div>
<div class="only-dogs">只含dogs</div>

上面的代码会把第二个div（.cats-and-dogs）选中并修改样式。

2. 精准场景：单个类名同时包含两个关键词 #

如果你的需求更严格——必须是某个单个类名里同时包含"cats"和"dogs"（排除那种有两个分开类的情况，比如.cats+.dogs），可以用filter()方法配合类名检查：

$('div').filter(function() {
  // 把元素的类拆分成数组，检查是否有单个类同时包含两个关键词
  return this.classList.some(className => className.includes('cats') && className.includes('dogs'));
}).first().css('color', 'red');

这个写法只会选中像.cats-and-dogs这样的元素，而不会选中同时有.cats和.dogs两个类的元素。

3. 精确匹配完整单词 #

如果需要匹配完整的"cats"和"dogs"单词（而不是像"catss"或"doggies"这种包含部分字符的情况），可以用正则表达式的单词边界\b：

$('div').filter(function() {
  const classStr = this.className;
  // \b表示单词边界，确保匹配的是完整的单词
  return /\bcats\b/.test(classStr) && /\bdogs\b/.test(classStr);
}).first().text('这是第一个匹配的完整单词元素！');

常见修改操作示例 #

选中第一个元素后，你可以做各种修改：

• 添加CSS类：$('[class*="cats"][class*="dogs"]').first().addClass('active');
• 修改文本内容：$('[class*="cats"][class*="dogs"]:first').text('已修改内容');
• 绑定点击事件：$('[class*="cats"][class*="dogs"]').first().click(function() { alert('点击了首个匹配元素'); });

内容的提问来源于stack exchange，提问作者Programming Skills