Атрибут данных не меняет значение на каждой итерации с использованием jQuery

Question

При выполнении поиска по списку на каждой итерации ключевые слова не меняются. Ключевые слова добавляются с использованием атрибутов данных в HTML коде (который отображается из базы данных, поэтому он меняет, li будет иметь другие ключевые слова). Таким образом, на каждой итерации ключевое слово остается тем же, и поиск не работает (я предполагаю).

JS Код

 function search_card() {
        var input, filter, txtvalue, key;
        input = document.getElementById('txtsearch');
        filter = input.value.toLowerCase();  
        $('.product_card').each(function(){
            key = $('.ProductNameBlock').data('keywords');
            if (key.toLowerCase().indexOf(filter) > -1) {
                $('.product_card').css('display','');
            }
                else {
                $('.product_card').css('display','none');
                }         
        });              
    }

ключевые слова использовано

• txtsearch - идентификатор входа
• product_card - имя класса li
• ProductNameBlock - имя класса div, в котором отображаются ключевые слова данных (<div class="ProductNameBlock" data-keywords="<%# Eval("KeyWords")%>"> (значения from db)

Ключевые слова могут иметь разные значения для каждой итерации. Например: сначала данные, сбор данных, избранные приложения. Я не знаю правильный формат. Что мне делать?

Answer 1

Это правильный метод

function search_card() {
        var input, filter, txtvalue, key;
        input = document.getElementById('txtsearch');
        filter = input.value.toLowerCase();  
        $('.product_card').each(function(){
            key = $(this).find('.ProductNameBlock').data('keywords');
            if (key.toLowerCase().indexOf(filter) > -1) {
                $(this).css('display','');
            }
                else {
                $(this).css('display','none');
                }         
        });              
    }