Question

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

我似乎无法正确读取两个数据属性中的值。将值（licData和stateData）输出到控制台显示为'undefined'。当然，搜索失败了。

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();
});

SAMPLE TABLE ROW

<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，因此你得到的值如下： -

＆＃13;

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);

＆＃13;

<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>

＆＃13;

按数据属性过滤

1 个答案: