Question

以下代码用于初步显示带有徽标，名称和一些链接的<div>元素。

输入字符信息时，过滤字段只显示包含输入字符的<div>个元素（其余部分被隐藏）。

:icontains是:contains过滤器的不区分大小写的变体。

在Firefox，Chrome和Opera上，输入字符会立即过滤<div>元素（50毫秒左右）。在IE 8上执行相同的操作需要将近5000毫秒。

以下代码仅显示了几个<div class='linken2col filterbaar'>。在我使用它的页面上，我有大约150个<div>元素。

任何人都知道IE 8中可能导致问题的原因（我还没有在IE 9中尝试过，但我怀疑我网站的很多访问者仍在使用IE 8）。很遗憾不能仅仅因为微软用Javascript代码做一些尴尬而无法使用这段代码。

  <form name="searchBox">
     Zoek naar <input type="text" name="filterargument" id="filterargument" />
     <input type="button" value="filter..." />
     <i>(deel van de) clubnaam , de federatie of het clubnr</i>
  </form>

  <div class='volledige-breedte floatleft'>

  <div class='linken2col filterbaar'><a href='http://www.staplijst.com/wsv-wetteren.asp' target='staplijst_link'><img src='http://www.staplijst.be/images/groot/010.jpg' class='logo100' alt='WSV Wetteren AKTIVIA 010' align='left'></a><a href='http://www.staplijst.com/wsv-wetteren.asp' target='staplijst_link'><b>WSV Wetteren</b></a>&nbsp;<img src='http://www.staplijst.be/images/staplijst-zonnetje.gif' class='inline-icon16' alt='licentiehouder van Staplijst'><br><br>AKTIVIA 010<br><div style='text-align:center;'><a href='http://www.staplijst.be/wandelclub-wsv-wetteren-aktivia-010.asp'>alle statistieken en grafieken&nbsp;<img src='http://www.staplijst.be/images/btngrafiek24.png' class='inline-icon24' alt='wandelstatistieken, uitslagen en grafieken voor WSV Wetteren AKTIVIA 010'></a></div></div>
  <div class='linken2col filterbaar'><a href='http://www.wandelclubegmont.be' target='staplijst_link'><img src='http://www.staplijst.be/images/groot/163.jpg' class='logo100' alt='WSV Egmont - Zottegem AKTIVIA 163' align='left'></a><a href='http://www.wandelclubegmont.be' target='staplijst_link'><b>WSV Egmont - Zottegem</b></a>&nbsp;<img src='http://www.staplijst.be/images/staplijst-zonnetje.gif' class='inline-icon16' alt='licentiehouder van Staplijst'><br><br>AKTIVIA 163<br><div style='text-align:center;'><a href='http://www.staplijst.be/wandelclub-wsv-egmont-uit-zottegem-aktivia-163.asp'>alle statistieken en grafieken&nbsp;<img src='http://www.staplijst.be/images/btngrafiek24.png' class='inline-icon24' alt='wandelstatistieken, uitslagen en grafieken voor WSV Egmont - Zottegem AKTIVIA 163'></a></div></div>


  <div class='linken2col filterbaar'><a href='http://www.zandstappers.be' target='staplijst_link'><img src='http://www.staplijst.be/images/groot/A044.jpg' class='logo100' alt='Wandelclub Zandstappers v.z.w. VWF A044' align='left'></a><a href='http://www.zandstappers.be' target='staplijst_link'><b>Wandelclub Zandstappers v.z.w.</b></a>&nbsp;<img src='http://www.staplijst.be/images/staplijst-zonnetje.gif' class='inline-icon16' alt='licentiehouder van Staplijst'><br><br>VWF A044<br><div style='text-align:center;'><a href='http://www.staplijst.be/wandelclub-zandstappers-uit-wechelderzande-vwf-a044.asp'>alle statistieken en grafieken&nbsp;<img src='http://www.staplijst.be/images/btngrafiek24.png' class='inline-icon24' alt='wandelstatistieken, uitslagen en grafieken voor Wandelclub Zandstappers v.z.w. VWF A044'></a></div></div>
  <div class='linken2col filterbaar'><a href='http://www.waterhoekstappers.be' target='staplijst_link'><img src='http://www.staplijst.be/images/groot/345.jpg' class='logo100' alt='De Waterhoekstappers - Heestert AKTIVIA 345' align='left'></a><a href='http://www.waterhoekstappers.be' target='staplijst_link'><b>De Waterhoekstappers - Heestert</b></a>&nbsp;<img src='http://www.staplijst.be/images/staplijst-zonnetje.gif' class='inline-icon16' alt='licentiehouder van Staplijst'><br><br>AKTIVIA 345<br><div style='text-align:center;'><a href='http://www.staplijst.be/wandelclub-waterhoekstappers-uit-heestert-aktivia-345.asp'>alle statistieken en grafieken&nbsp;<img src='http://www.staplijst.be/images/btngrafiek24.png' class='inline-icon24' alt='wandelstatistieken, uitslagen en grafieken voor De Waterhoekstappers - Heestert AKTIVIA 345'></a></div></div>


  <div class='linken2col filterbaar'><a href='http://www.stormvogels.be' target='staplijst_link'><img src='http://www.staplijst.be/images/groot/070.jpg' class='logo100' alt='WSV De StormVogels vzw Oostende AKTIVIA 070' align='left'></a><a href='http://www.stormvogels.be' target='staplijst_link'><b>WSV De StormVogels vzw Oostende</b></a>&nbsp;<img src='http://www.staplijst.be/images/staplijst-zonnetje.gif' class='inline-icon16' alt='licentiehouder van Staplijst'><br><br>AKTIVIA 070<br><div style='text-align:center;'><a href='http://www.staplijst.be/wandelclub-stormvogels-uit-oostende-aktivia-070.asp'>alle statistieken en grafieken&nbsp;<img src='http://www.staplijst.be/images/btngrafiek24.png' class='inline-icon24' alt='wandelstatistieken, uitslagen en grafieken voor WSV De StormVogels vzw Oostende AKTIVIA 070'></a></div></div>
  <div class='linken2col filterbaar'><a href='http://www.wandelmee.be' target='staplijst_link'><img src='http://www.staplijst.be/images/groot/A054.jpg' class='logo100' alt='wandelmee.be VWF A054' align='left'></a><a href='http://www.wandelmee.be' target='staplijst_link'><b>wandelmee.be</b></a>&nbsp;<img src='http://www.staplijst.be/images/staplijst-zonnetje.gif' class='inline-icon16' alt='licentiehouder van Staplijst'><br><br>VWF A054<br><div style='text-align:center;'><a href='http://www.staplijst.be/wandelmee.asp'>alle statistieken en grafieken&nbsp;<img src='http://www.staplijst.be/images/btngrafiek24.png' class='inline-icon24' alt='wandelstatistieken, uitslagen en grafieken voor wandelmee.be VWF A054'></a></div></div>

  </div>

  <script type="text/javascript">
         /* ---- extra selector "icontains" registreren ------------------------------ */
         jQuery.expr[':'].icontains = function(a, i, m) {
            return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
         };

         var $filterArgument =  $("#filterargument");

         $('#filterargument').keyup(
            function() { performFilter(); }
         );

         function performFilter() {
            /*var filterArgument = $("#filterargument").val();*/
            var filterArgument = $filterArgument.val();

            var t1 = +new Date;

            if (filterArgument === '') {
               $('.filterbaar').show(); }
            else {
               $('.filterbaar:not(:icontains("' + filterArgument + '"))').hide();
               $('.filterbaar:icontains("' + filterArgument + '")').show();
            }

            var t2 = +new Date;
            alert ( filterArgument + ':' + (t2 - t1) + ' miliseconds');

         }
  </script>

Answer 1

如果唯一已更改的变量是浏览器（使用IE8是唯一的区别），那么这只是提出问题的一个例子。 IE8需要很长时间，因为IE8很慢。

在某些情况下，替代方法可能会使用更优化的JS，但老实说，我不知道你必须换掉甚至开始猜测的功能。

Answer 2

试试看它是否更好：

jQuery.expr[':'].icontains = function(a, i, m) {
  return (a.textContent || a.innerText || getText([ a ]) || "")
    .toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};

编辑：实际上，我需要修改该代码，您无法以与核心相同的方式访问elem或match。

很可能它不会更快，但它是本机：包含的实现方式。

编辑：要在IE中实际加快速度，您可能需要在对象或数组中表示元素，然后使用该数组而不是html元素进行所有过滤。然后，您可以基于数组/对象显示元素。这种方法非常类似于数据表插件允许排序和过滤的方式，它仍然足够快，可以在IE中接受。

编辑评论：这就是我用数组实现过滤的方法： http://jsfiddle.net/Tentonaxe/Ju6TF/1/

var $filterArgument =  $("#filterargument");
var filterCache = $.map($(".filterbaar"),function(el){
    return {
        el: el,
        text: (el.textContent || el.innerText || $.find.getText([ el ]) || "").toUpperCase()
    };
});
$('#filterargument').keyup(performFilter);
function performFilter() {
    /*var filterArgument = $("#filterargument").val();*/
    var filterArgument = $filterArgument.val();
    var t1 = +new Date;
    $('.filterbaar').show();
    if (filterArgument === '') {
        return;
    }
    else {
        $(filterCache).filter(function(el){
            return this.text.indexOf(filterArgument.toUpperCase()) == -1;  
        }).each(function(){
            $(this.el).hide(); 
        });
    }
    var t2 = +new Date;
    alert( filterArgument + ':' + (t2 - t1) + ' miliseconds');
}

为什么会这样：icontining代码在IE 8上流动，但在Firefox，Chrome和Opera上快速流动

2 个答案: