CODEWITHSUNDEEP
javascriptjqueryhtmljquery-selectorsselector
Bastiaan Blaauw
Bastiaan Blaauw

Reputation: 33

How to use "start with" and "contain" selector in one selector of jquery?

I would like to able to search for matches in for instance DOM elements classnames or attributes that starts with a certain text followed by a match contains. I know u can use those seperately.

An example search string classname could by person-john-doe. begins with person and contains john.

Upvotes: 0

Views: 68

Answers (3)

adeneo
adeneo

Reputation: 318272

Sure, you can combine the attributes selectors

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

If your elements have more than one class, the attribute might not start with the classname you want to check, and if so you'd have to iterate over the elements and classes

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

Upvotes: 1

Samyappa
Samyappa

Reputation: 531

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

Upvotes: 0

David Thomas
David Thomas

Reputation: 253358

While adeneo's answer meets the requirements of matching the class attribute that begins with person and contains john that's the attribute, and doesn't necessarily match a particular class-name. If there is more than one class present then it may not work quite as I suspect you wish; I'm assuming here that you want to find elements with a class beginning with 'person' and contains 'john' regardless of how many other classes might be attached.

With that in mind I'd offer an alternative answer:

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

Demonstration of what I think might be an oversight in adeneo's answer:

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

In this snippet I think that you would want to only highlight the first of the elements, but given the ambiguity of the question I'm not entirely sure.

References:

Upvotes: 0

Related Questions