Question

我知道有很多关于Jquery选择器和regex的主题，但我需要的是这个

我有一些像这样的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>

我想要一个选择器来选择每个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代码来过滤掉结果。我在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

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

＆＃13;

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");

＆＃13;

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

＆＃13;

Answer 3

以下是一种方法，它首先为每个相关元素分配一个有效的自定义属性//SYSIN DD * SORT FIELDS=COPY INREC IFTHEN=(WHEN=INIT,OVERLAY=(101:SEQNUM,8,ZD, RESTART=(26,9))), IFTHEN=(WHEN=(101,8,ZD,EQ,30), OVERLAY=(1:C'1')) /*（以便于后续选择/过滤），然后使用函数返回一个jQuery集合找到的元素：

data-rank

＆＃13;

// 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');

＆＃13;

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

＆＃13;

JS Fiddle demo

具有最大值

3 个答案: