如何在 jquery 的一个选择器中使用“start with”和“contain”选择器？

Posted 2023-05-09

【中文标题】如何在 jquery 的一个选择器中使用“start with”和“contain”选择器？

【英文标题】：How to use "start with" and "contain" selector in one selector of jquery?

【发布时间】：2017-02-08 00:25:47

【问题描述】：

我希望能够在例如 DOM 元素类名或属性中搜索匹配，这些元素以特定文本开头，后跟匹配包含。我知道你可以单独使用这些。

一个示例搜索字符串类名可以是person-john-doe。 以person 开头并包含john。

【参考方案1】：

当然，你可以组合属性选择器

$('[class^="person"][class*="john"]')

$('[class^="person"][class*="john"]').css('color','red')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="person-john-doe">John Doe</div>
<div class="person-peter-pan">Peter Pan</div>

如果您的元素有多个类，则属性可能不会以您要检查的类名开头，如果是这样，您必须遍历元素和类

$('[class*="john"]').filter( (i,el) => 
  return [...el.classList].some(klass => klass.indexOf('person')===0 && klass.indexOf('john')!=-1);
);

$('[class*="john"]').filter( (i,el) => 
  return [...el.classList].some(klass => klass.indexOf('person')===0 && klass.indexOf('john')!=-1);
).css('color', 'red');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="other klasses person-john-doe">John Doe</div>
<div class="other person-peter-pan klasses">Peter Pan</div>

【讨论】：

你比我早了几秒钟，这是我刚刚为任何可能需要它的人完成的小提琴。 jsfiddle.net/n5dkuduc

【参考方案2】：

虽然adeneo's answer 满足匹配class 的要求attribute 以person 开头并包含john 这是该属性，不一定匹配特定的类名.如果存在不止一个类，那么它可能不会像我怀疑你希望的那样工作；我在这里假设您想要查找类以“person”开头并包含“john”的元素，而不管可能附加多少其他类。

考虑到这一点，我会提供一个替代答案：

// selecting all elements with a class attribute, and
// using the filter() method to reduce that collection
// to those elements which match the criteria within
// the method:
$('[class]').filter(function() 

  // here we retrieve the classList of the current element
  // of the collection over which we're iterating and,
  // using Array.from(), convert that list into an Array
  // and then call Array.prototype.some() to check whether
  // at least one of the class-names (cN) is matched by
  // both regular expressions:
  return Array.from(this.classList).some(function(cN) 

    // /^person/ : checks that the class-name (cN) begins
    // with ('^') the string 'person',
    // /john/ checks that the class-name also contains the
    // string 'john'.
    // RegExp.test() returns a Boolean, true if the supplied
    // String satisfies the attached regular expression:
    return /^person/.test(cN) && /john/.test(cN);
  );

// a simple change of a property to show the matched element(s):
).css('color', 'limegreen');

$('[class]').filter(function() 
  return Array.from(this.classList).some(function(cN) 
    return /^person/.test(cN) && /john/.test(cN);
  );
).css('color', 'limegreen');

body 
  padding-top: 2em;

div[class]::after 
  content: ' (' attr(class)')';
  display: inline-block;
  float: right;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="person-john-doe">John Doe</div>
<div class="person-peter-pan john">Peter Pan</div>

证明我认为可能是对adeno回答的疏忽：

$('[class^="person"][class*="john"]').css('color', 'limegreen');

body 
  padding-top: 2em;

div[class]::after 
  content: ' (' attr(class)')';
  display: inline-block;
  float: right;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="person-john-doe">John Doe</div>
<div class="person-peter-pan john">Peter Pan</div>

在这个 sn-p 中，我认为您只想突出显示第一个元素，但考虑到问题的模棱两可，我并不完全确定。

参考资料：

css()。 filter()。

【参考方案3】：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function()
    $('[class^="person"],[class*="john"]').css('color','red')
);
</script>
<div class="person-john-doe">John Doe</div>
<div class="person-peter-pan">Peter Pan</div>