0

目前我正在过滤一个数组array.filter，传入一个正则表达式。我正在过滤的数组基于 div 的内容。

该 div 的每个子 div 都有一个文本，我将其提取$.text()并放入它自己的数组中，以便我可以过滤它。然后我输出过滤后的数组的内容。

问题是过滤需要一个字符串数组，因此我制作了单独的数组，我过滤然后打印到html。但是，当用户单击列表中的一项时，什么也没有发生，因为用户单击了未绑定到事件的 div。我准备好对文档进行绑定，并使用绑定事件来获取data-item-pageid属性的值。

我需要一种方法来访问data-item-pageid单击的元素，并且仍然很快。我不希望每次用户键入时都重新绑定事件，所以我认为需要更改逻辑。我需要隐藏与正则表达式不匹配的 div。

这是html：

<div class="content">
    <div class="categories">
        <div class="item" data-item-pageid="1">text1</div>
        <div class="item" data-item-pageid="2">text2</div>
        <div class="item" data-item-pageid="3">text3</div>
    </div>
    <div class="categories">
        <div class="item" data-item-pageid="4">text4</div>
        <div class="item"data-item-pageid="5">text5</div>
        <div class="item"data-item-pageid="6">text6</div>
    </div>
</div>
<div class="filter_result"></div>

这是 JavaScript 代码：

// Binds the click event for each category item
$('.category_item').click(function() {
   console.log($(this));
});

...

// Array for filter
filterArray = [];
for (var i = 0; i < $categoryItems.length; ++i) {
    filterArray[i] = $($categoryItems[i]).text();
}

...

function filterList(key) {

    var result = filterArray.filter(/./.test.bind(new RegExp(key, 'i')));

    if (key != '' || key) {
        var markup = []; //ugh
        for (var i = 0; i < result.length; ++i) {
            markup += '<div class="category_item">' + result[i] + '</div>';
        }

        if ($categoryItems.is(':visible'))
            $categoriesDiv.toggle();

        $filteredResult.html(markup);
    } else {
        $filteredResult.html('');

        if (!$categoryItems.is(':visible'))
            $categoriesDiv.toggle();
    }
}
4

1 回答 1

1

你可以做委托事件处理

$(CONTAINER_SELECTOR).on('click', CHILD_SELECTOR, function(){ 
     /* Your click handler*/ 
});
  • CONTAINER_SELECTOR未添加/删除的元素在哪里保留其侦听器
  • CHILD_SELECTOR是添加/删除的子项的选择器，我们希望收听其点击次数

在你的情况下$(CONTAINER_SELECTOR)可能是$filteredResultand CHILD_SELECTOR .category_item。

为了更好地理解委托事件，请查看官方文档或查看我关于委托事件的其他答案之一。

更新

您可以使用以下方法轻松检索过滤后的列表：

$elements = $('.item');
$filteredList = $elements.filter(
     function(index){ 
         return conditionIsMetFor($(this).text()); // this refers to the element under iteration
     }
);

然后你不能拿 $filteredList 和：

  • $.clone()它
  • 迭代它并根据$.data()它们包含的创建新元素
  • 等等
于 2013-06-03T11:41:31.067 回答