Javascript select 具有最大值 class 的元素

Question

我知道有很多关于 Jquery select 或正则表达式的话题，但我需要的是这个

我有一些像这样的 div :

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

我想要 selector for select 每个 div 和 rank > specific_value 但是我无法修改我的 html。我知道我应该使用 filter 功能，但我在 jquery/regex 方面不是很好。这是我的开始:

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

预期结果：

<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

我使用了简单的 JQuery/Javascript 代码来过滤出结果。我也不太擅长正则表达式：

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

您可以使用正则表达式检查 rank class 的存在并获取它的值。

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

下面是一种方法，它首先为每个相关元素分配一个有效的自定义属性 data-rank（以便于后续 selection/filtration），然后使用一个函数来return jQuery 个找到的元素集合：

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

Javascript select 具有最大值 class 的元素

Javascript select element that has class with max value

javascript

jquery

jquery-selectors

jquery-filter