按数据属性过滤

Question

我正在尝试使用 filter 来查找包含两个不同数据属性中的特定值的表格行（除了一般文本）。

我似乎无法正确读取这两个数据属性的值。将值（licData 和 stateData）输出到控制台显示“未定义”。当然，搜索也会失败。

JS

var $rows = $('.livesearch tr');

$('#search').keyup(function() {
  var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

  $rows.show().filter(function() {

    var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
    var licData = $(this).find('td').attr('data-lic');
    var stateData = $(this).find('td').attr('data-state');

    console.log(text + '-' + licData + '-' + stateData + '<br>');

    if (!~stateData.indexOf(val) || !~licData.indexOf(val) || !~text.indexOf(val)) {
      return true;
    } else {
      return false
    }

  }).hide();
});

示例表行

<tr>
  <td>Aaron</td>
  <td>Ellebrach</td>
  <td>Clerical</td>
  <td>444-444-4444</td>
  <td>Call</td>
  <td data-lic="special">C</td>
  <td data-state="state data here">CA</td>
</tr>  

Answer 1

试试：

var licData = $(this).find('td[data-lic]').attr('data-lic');
var stateData = $(this).find('td[data-state]').attr('data-state');

您的代码：

$(this).find('td').attr('data-lic')

实际上为您提供了第一个 td 的属性，这显然是未定义的，但是当您执行 $(this).find('td[data-lic]') 时，您实际上是在寻找具有此数据属性的任何 td，因此您会得到如下值：-

var licData = $('tr').find('td[data-lic]').attr('data-lic');
var stateData = $('tr').find('td[data-state]').attr('data-state');
console.log('licData:   ' + licData);
console.log('stateData: ' + stateData);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<table>
  <tr>
    <td>Aaron</td>
    <td>Ellebrach</td>
    <td>Clerical</td>
    <td>444-444-4444</td>
    <td>Call</td>
    <td data-lic="special">C</td>
    <td data-state="state data here">CA</td>
  </tr>
</table>