jQuery 匹配任何变体的 IndexOf 数组

Question

在下面的代码中，我正在查看一个数组，如果数据属性与该数组匹配，它会在元素之后分配一些 HTML。

但是，有没有办法使用数组关键字来松散匹配属性，而不是定义数组中的每个变体？

例如。我可以只使用 ['game', 'playstaion'] 而不是包含 ['games', 'game', 'playstation', 'playstation4'] 的数组，它会匹配任何包含 words/letters 的数据属性，而不是寻找完全匹配。

谢谢

var gamingTags = [
  'gaming',
  'games',
  'game',
  'video games',
  'video game',
  'mobile games',
  'twitch',
  'minecraft',
  'videogames',
  'gameplay',
  'x-box',
  'switch',
  'play station',
  'playstation 4'
];


jQuery('a').filter(function(i, e) {
  return gamingTags.indexOf(jQuery(this).attr('data-tag')) > -1
}).after("<span title\=\"Gaming Tags\" class\=\"t-tags t-tags-g\"> G </span>");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <thead>
    <tr>
      <th colspan="3" class="thead">
        <h3>HOT Day</h3>
      </th>
    </tr>
    <tr>
      <th>Rank</th>
      <th>Tag</th>
      <th>Count</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td><a data-tag="gaming" href="https://odysee.com/$/discover?t=gaming">gaming</a></td>
      <td>7,152</td>
    </tr>
    <tr>
      <td>2</td>
      <td><a data-tag="flowers" href="https://odysee.com/$/discover?t=flowers">flowers</a></td>
      <td>1,489</td>
    </tr>
    <tr>
      <td>3</td>
      <td><a data-tag="art" href="https://odysee.com/$/discover?t=art">art</a></td>
      <td>5,255</td>
    </tr>
    <tr>
      <td>4</td>
      <td><a data-tag="playstation" href="https://odysee.com/$/discover?t=playstation">playstation</a></td>
      <td>2,352</td>
    </tr>
  </tbody>
</table>

Answer 1

例如，您可以将“gam”和“play”转换为正则表达式（/gam/ 和 /play/）并测试数据标签是否匹配。这将匹配字符串中任何包含“gam”或“play”的任何内容。

var gamingTags = [
  'gam',
  'play'
];


jQuery('a').filter(function(i, e) {
  const dataTag = jQuery(this).attr('data-tag');
  return gamingTags.some( tag => new RegExp(tag).test(dataTag) );
}).after("<span title\=\"Gaming Tags\" class\=\"t-tags t-tags-g\"> G </span>");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <thead>
    <tr>
      <th colspan="3" class="thead">
        <h3>HOT Day</h3>
      </th>
    </tr>
    <tr>
      <th>Rank</th>
      <th>Tag</th>
      <th>Count</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td><a data-tag="gaming" href="https://odysee.com/$/discover?t=gaming">gaming</a></td>
      <td>7,152</td>
    </tr>
    <tr>
      <td>2</td>
      <td><a data-tag="flowers" href="https://odysee.com/$/discover?t=flowers">flowers</a></td>
      <td>1,489</td>
    </tr>
    <tr>
      <td>3</td>
      <td><a data-tag="art" href="https://odysee.com/$/discover?t=art">art</a></td>
      <td>5,255</td>
    </tr>
    <tr>
      <td>4</td>
      <td><a data-tag="playstation" href="https://odysee.com/$/discover?t=playstation">playstation</a></td>
      <td>2,352</td>
    </tr>
  </tbody>
</table>

另一种方法是让 jQuery 直接选择正确的元素，而不需要过滤器，方法是构造一个松散的选择器 a[data-tag*=gam], a[data-tag*=play] :

var gamingTags = [
  'gam',
  'play'
];

const selectors = gamingTags.map( tag => `a[data-tag*=${tag}]` ).join(",")

jQuery(selectors).after("<span title\=\"Gaming Tags\" class\=\"t-tags t-tags-g\"> G </span>");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <thead>
    <tr>
      <th colspan="3" class="thead">
        <h3>HOT Day</h3>
      </th>
    </tr>
    <tr>
      <th>Rank</th>
      <th>Tag</th>
      <th>Count</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td><a data-tag="gaming" href="https://odysee.com/$/discover?t=gaming">gaming</a></td>
      <td>7,152</td>
    </tr>
    <tr>
      <td>2</td>
      <td><a data-tag="flowers" href="https://odysee.com/$/discover?t=flowers">flowers</a></td>
      <td>1,489</td>
    </tr>
    <tr>
      <td>3</td>
      <td><a data-tag="art" href="https://odysee.com/$/discover?t=art">art</a></td>
      <td>5,255</td>
    </tr>
    <tr>
      <td>4</td>
      <td><a data-tag="playstation" href="https://odysee.com/$/discover?t=playstation">playstation</a></td>
      <td>2,352</td>
    </tr>
  </tbody>
</table>

jQuery 匹配任何变体的 IndexOf 数组

jQuery IndexOf array that matches any variation

javascript

arrays

jquery

indexof