Javascript select element that has class with max value

Question

I know there is many topics about Jquery selector with regex, but my need is this

I have some div like this :

<div class="some random things rank0">hello</div>
<div class="some things rank1">hello</div>
<div class="things rank1">hello</div>
<div class="some random rank2 things">hello</div>
<div class="random rank2 some">hello</div>
<div class="some things rank3">hello</div>
<div class="some random rank4">hello</div>

I would like a selector for select every div with a rank > specific_value but i can't modify my html. I know i should use filter function, but i'm not very good in jquery/regex. There is my start :

var specific_value = 2;
$.each($("div").filter(function() {
    // I need this
    // return rank > specific_value
}), function() {
    $(this).html("test");
})

Expected result :

<div class="some random things rank0">hello</div>
<div class="some things rank1">hello</div>
<div class="things rank1">hello</div>
<div class="some random rank2 things">hello</div>
<div class="random rank2 some">hello</div>
<div class="some things rank3">test</div>
<div class="some random rank4">test</div>

Answer 1

I have used simple JQuery/Javascript code to filter out the result. I am also not that much good in Regex:

var specific_value = 2;
$.each($("div").filter(function() {
  var classes = $(this).attr("class").split(" ");
  var matchfound = false;
  for (i = 0; i < classes.length; i++) {
    if (classes[i].indexOf("rank") > -1) {
      var rank = classes[i];
      rank = rank.replace("rank", "");
      rank = parseInt(rank, 10);
      if(rank > specific_value)
        matchfound = true;
    }
  }
  
  return matchfound;
}), function() {
  $(this).html("test");
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<div class="some random things rank0">hello</div>
<div class="some things rank1">hello</div>
<div class="things rank1">hello</div>
<div class="some random rank2 things">hello</div>
<div class="random rank2 some">hello</div>
<div class="some things rank3">hello</div>
<div class="some random rank4">hello</div>

Answer 2

You can use regex to checking existence of rank class and get value of it.

var specific_value = 2;
$("div").filter(function() {
    var match = /rank([\d]+)/g.exec($(this).attr("class"));
    if (match != null && match[1] > specific_value)
        return true;     
}).text("text");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="some random things rank0">hello</div>
<div class="some things rank1">hello</div>
<div class="things rank1">hello</div>
<div class="some random rank2 things">hello</div>
<div class="random rank2 some">hello</div>
<div class="some things rank3">hello</div>
<div class="some random rank4">hello</div>

Answer 3

One approach is the following, which first assigns a valid custom attribute, data-rank, to each of the relevant elements (to allow for easier subsequent selection/filtration), and then uses a function to return a jQuery collection of found elements:

// find all elements with the string 'rank' present in the
// 'class' attribute, then iterating over that collection
// using the each() method
$('[class*=rank]').each(function() {

  // while we only expect a single rank from from any element,
  // the singular ('class') is a reserved word, so here we use
  // the plural ('classes').
  // First we convert the Array-like classList (a collection of
  // the current element's class-names) into an Array, in order
  // to use Array.prototype.filter():
  var classes = Array.from(this.classList).filter(function(cName) {

    // here we return only those class-names that begin with ('^')
    // the string 'rank' ('rank') followed by a sequence of
    // one-or-more ('+') number characters ('\d') which is followed
    // by a word-break ('\b'), using RegExp.prototype.test() which
    // returns Boolean true if the supplied string (the current
    // class-name) matches the regular expression:
    return /^rank\d+\b/.test(cName);
  });

  // if the classes Array has a truthy length (1 or above):
  if (classes.length) {

    // we find the numbers ('\d+'), at the end of the
    // end of the String ('$'), and set that number as
    // the data-rank attribute (the dataset.rank property):
    this.dataset.rank = classes[0].match(/\d+$/);
  }
});

// here we supply the collection of elements we wish to
// select from, and the rank above-which we wish to select:    
function selectByRank(collection, rank) {

  // we return the filtered jQuery collection, having
  // filtered it with the jQuery filter() method:
  return collection.filter(function(){

    // we retain those elements for which the data-rank
    // attribute, when interpreted as a base-10 number
    // is greater than the supplied rank:
    return parseInt(this.dataset.rank, 10) > rank;
  });
}

// because we return a jQuery collection we can apply
// jQuery methods directly to the returned element
// collection:
selectByRank($('[class*=rank]'), 2).text('test').css('color', 'limegreen');

$('[class*=rank]').each(function() {
  var classes = Array.from(this.classList).filter(function(cName) {
    return /^rank\d+\b/.test(cName);
  });
  if (classes.length) {
    this.dataset.rank = classes[0].match(/\d+$/);
  }
});

function selectByRank(rank) {
  return $('[class*=rank]').filter(function() {
    return parseInt(this.dataset.rank, 10) > rank;
  });
}

selectByRank(2).text('test').css('color', 'limegreen');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="some random things rank0">hello</div>
<div class="some things rank1">hello</div>
<div class="things rank1">hello</div>
<div class="some random rank2 things">hello</div>
<div class="random rank2 some">hello</div>
<div class="some things rank3">hello</div>
<div class="some random rank4">hello</div>

JS Fiddle demo.