jQuery按条件过滤行 [英] jQuery Filter row by condition

问题描述

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

I have a page containing multiple tabs per region.

表中的每一行都有一个类，其中包含每个类所影响的区域.

Each row in the table has a class with each region that its impacted by.

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

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

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

When a tab is clicked, it filters out the table and removes anything where the condition is not met.

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

$('#' + tab).find("#trainingEvents .results tr:not(.Americas.EMEA.APAC)").remove(); <- This is the ALL tab

除了我的问题与多个"有关，每个选项卡都很容易理解.

Each of the tabs is pretty easy to understand except for "Multiple" which is what my question relates to.

需要满足的条件是，删除不包含3个可能区域中的2个的行. 例如:

The condition needs to be, remove rows that do not contain 2 of the 3 possible regions. For example:

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

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

<tr class="apac">...</tr> = False, Remove it

如何完成此过滤器?只需满足3种可能选项的任意2种组合

How can I accomplish this filter? Just needs to meet any 2 combinations of the 3 possible options

推荐答案

我建议以下内容:

// 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的那些浏览器:

To account for those browsers without access to Array.prototype.filter(), and possibly 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() .
  li>
  • element.classList .
  • JavaScript:
    • Array.prototype.indexOf().
    • Array.prototype.filter().
    • Array.prototype.push().
    • element.classList.
    • filter() .
    • remove() .

    这篇关于jQuery按条件过滤行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！