Question

我希望能够在例如DOM元素类名称或以某个文本后跟匹配包含的属性中搜索匹配项。我知道你可以单独使用它们。

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

Answer 1

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

虽然adeneo's answer符合匹配以class开头的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>

证明我认为可能是对adeneo答案的疏忽：

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

在这个片段中，我认为你只想突出第一个元素，但考虑到问题的含糊不清，我不完全确定。

参考文献：

css()。
filter()。

如何使用＆＃34;以＆＃34;开头和＆＃34;包含＆＃34;选择器在jquery的一个选择器？

3 个答案: