18910140161

JavaScript-如何通过过滤行标题属性显示所有匹配行?-堆栈溢出

顺晟科技

2022-10-19 13:17:46

134

#myinput是输入框,#ulmain是ul id,.abch2是行标题类,.abc是emoji行类。当用户输入表情符号的名称时,我只想显示所有匹配的线条,并隐藏所有其他线条,包括那个Conainer的h2线条。我试图用这些代码运行,但它不起作用。


顺晟科技:

亲爱的!我希望这能解决你的问题。此外,您还可以根据需要修改此脚本。

逻辑

  • 使用
  • 选择ul中的所有%s
  • 将列表一分为二。心组和星组。
  • 我用了这个逻辑。找到了有航向的李。那是星群的航向。在此之后和包括的所有节点是一个组,在此之前的节点是另一个组。
  • 循环完成并检查每个的title属性。如果标题与输入匹配,则显示它,否则隐藏它。
  • 检查前面创建的可见组的长度。如果长度为1,则表示只有标题可见。在这种情况下,也要隐藏标题。

我对您的查询做了一个工作jsfiddle。解决方案是20行javascript ->https://jsfiddle.net/markov88/ymrf1269/55/

$("#myInput").on("keyup", function () {
    var value = $(this).val().toLowerCase();
    var li = $("#ulmain li");
    li.hide();

    li.each(function () {
        var text = $(this).attr('title');
        if (text.includes(value)) {
            $(this).show();
        }
    });

});
  • TAG:
相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航