Question

我有一个页面，每个区域包含多个标签。

enter image description here

表格中的每一行都有一个类，每个区域受其影响。

<tr class="apac emea americas">...</tr> <tr class="apac emea">...</tr>

单击选项卡时，它会过滤掉表格并删除不符合条件的任何内容。

$('#' + tab).find("#trainingEvents .results tr:not(.Americas.EMEA.APAC)").remove();＆lt; - 这是ALL标签

每个标签都很容易理解，除了“多个”，这是我的问题所涉及的。

条件必须是，删除不包含3个可能区域中的2个的行。例如：

<tr class="amea apac"></tr> = True

<tr class="apac">...</tr> = False，将其删除

如何完成此过滤器？只需要满足3种可能选项中的任意两种组合

Answer 1

我建议如下：

// collating the 'regions':
var regions = ['americas', 'emea', 'apac'],
// initialising an array to use, later:
    foundClasses = [];

// iterating over the 'tr' elements, filtering them:
$('tr').filter(function () {
    // using Array.prototype.forEach to filter the classList of the element:
    foundClasses = Array.prototype.filter.call(this.classList, function (c) {
        // 'c' is the current class in the classList we're iterating over,
        // if it's in the array we return that array to the 'foundClasses':
        if (regions.indexOf(c) > -1) {
            return c;
        }
    });
    // we keep the the element in the jQuery collection (of 'tr' elements),
    // if we have only 1 (or less...) classes found:
    return foundClasses.length < 2;
// removing those 'tr' elements:
}).remove();

var regions = ['americas', 'emea', 'apac'],
    foundClasses = [];

$('tr').filter(function () {
  foundClasses = Array.prototype.filter.call(this.classList, function (c) {
    if (regions.indexOf(c) > -1) {
      return c;
    }
  });
  return foundClasses.length < 2;
}).remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tbody>
        <tr class="americas emea">
            <td>americas emea</td>
        </tr>
        <tr class="apac">
            <td>apac</td>
        </tr>
        <tr class="emea">
            <td>emea</td>
        </tr>
        <tr class="americas">
            <td>americas</td>
        </tr>
        <tr class="apac emea">
            <td>apac emea</td>
        </tr>
    </tbody>
</table>

要考虑那些无法访问Array.prototype.filter()，可能还有element.classList的浏览器：

var regions = ['americas', 'emea', 'apac'],
  classes,
  foundClasses = [];

    $('tr').filter(function() {
      // creating an array by splitting the className property by white-space:
      classes = this.className.split(/\s+/);
      // crudely emptying the initialised array:
      foundClasses = [];
      // iterating over the array of classes using a for-loop:
      for (var i = 0, len = classes.length; i < len; i++) {
        // if the current element in the classes array is in the
        // foundClasses array:
        if (regions.indexOf(classes[i]) > -1) {
          // we push the current class into the foundClasses array:
          foundClasses.push(classes[i]);
        }
      }
      // as above:
      return foundClasses.length < 2;
    }).remove();

var regions = ['americas', 'emea', 'apac'],
  classes,
  foundClasses = [];

$('tr').filter(function() {
  classes = this.className.split(/\s+/);
  foundClasses = []; // crudely emptying the array
  for (var i = 0, len = classes.length; i < len; i++) {
    if (regions.indexOf(classes[i]) > -1) {
      foundClasses.push(classes[i]);
    }
  }
  return foundClasses.length < 2;
}).remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr class="americas emea">
      <td>americas emea</td>
    </tr>
    <tr class="apac">
      <td>apac</td>
    </tr>
    <tr class="emea">
      <td>emea</td>
    </tr>
    <tr class="americas">
      <td>americas</td>
    </tr>
    <tr class="apac emea">
      <td>apac emea</td>
    </tr>
  </tbody>
</table>

参考文献：

JavaScript的：
- Array.prototype.indexOf()。
- Array.prototype.filter()。
- Array.prototype.push()。
- element.classList。
jQuery的：
- filter()。
- remove()。

Answer 2

你用的是函数＆＃34; filter＆＃34; :(在另一个要求之后更新它来过滤它）

$("tr").
filter(function(index){
    var classes = $(this).attr("class").split(" ");
    var regions = "americas,emea,apac,";
    var counter = 0;
    for(var i = 0, j = classes.length;i < j;i++){
        if(regions.indexOf(classes[i] + ",") >= 0){counter++;}
    }
    return counter != 2;
})
.remove();

该代码将删除少于或多于2个区域类的所有行。

FIDDLE已经更新了：http://jsfiddle.net/fac5tapz/8/

如果您使用的是自定义属性，则可以省略一些代码：

<table border="1">
    <tr regions="apac emea"><td>first row do not remove</td></tr>
    <tr regions="apac emea"><td>second row do not remove</td></tr>
    <tr regions="apac"><td>third will be removed</td></tr>
    <tr regions="apac emea americas"><td>fourth will be remove</td></tr>
    <tr regions="apac emea"><td>fifth row do not remove</td></tr>
    <tr regions="apac emea americas"><td>sixth will be removed</td></tr>
    <tr regions="apac"><td>seventh will be removed</td></tr>
    <tr regions="americas emea"><td>eighth row do not remove</td></tr>
</table>

$("tr").
filter(function(index){
    var regions = $(this).attr("regions").split(" ");
    return regions.length != 2;
})
.remove();

此版本的另一个小提琴：http://jsfiddle.net/dkseknyw/2/

jQuery按条件筛选

2 个答案: