按数据属性筛选

Question

我正在尝试使用过滤器来查找在两个不同数据属性（除了常规文本）中包含特定值的表行。

我似乎无法正确读取两个数据属性中的值。将值（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>