データ属性によるフィルタリング

Question

フィルタを使用して、2つの異なるデータ属性（一般的なテキストに加えて）に特定の値を含むテーブル行を検索しようとしています。

2つのデータ属性から値を正しく読み取れないようです。値（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表の行

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

これらの値を取得するために働いていた