javascript - Jquery从输出元素突出显示表行中的匹配元素

Question

如何突出显示维克多和史蒂夫......(以及来自#output的其他内容，如果发生变化)

HTML

<div id="output">Victor,Steve</div>
<table border="0">
    <tr><td>id</td><td>name</td><td>age</td></tr>
    <tr><td>1</td><td>Victor</td><td>14</td></tr>
    <tr><td>2</td><td>John</td><td>15</td></tr>
    <tr><td>3</td><td>Steve</td><td>16</td></tr>
    <tr><td>7</td><td>Michael</td><td>17</td></tr>
    <tr><td>9</td><td>Michaela</td><td>20</td></tr>
</table>

jquery

var gg = $('#output').text();
$(document).ready(function(){
    $('table tr').each(function(){
        if($(this).find('td').eq(1).text() == gg){
            $(this).css('background','red');
        }
    });
});

这里是JSFiddle

Answer 1

您可以使用includes()来检查字符串是否包含子字符串。

var gg = $('#output').text();

$('table tr').each(function() {
  if (gg.includes($(this).find('td').eq(1).text())) {
    $(this).css('background', 'red');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output">Victor,Steve</div>
<table border="0">
  <tr>
    <td>id</td>
    <td>name</td>
    <td>age</td>
  </tr>
  <tr>
    <td>1</td>
    <td>Victor</td>
    <td>14</td>
  </tr>
  <tr>
    <td>2</td>
    <td>John</td>
    <td>15</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Steve</td>
    <td>16</td>
  </tr>
  <tr>
    <td>7</td>
    <td>Michael</td>
    <td>17</td>
  </tr>
  <tr>
    <td>9</td>
    <td>Michaela</td>
    <td>20</td>
  </tr>
</table>