配列内の各値をループし、各値について、jQueryの値のリストをループして完全に一致するものを見つけます。一致するものが見つかったら、そのli要素を明らかにします。配列内のすべてが常にリストに存在します。これはすべて問題なく動作します。ただし、実際には、配列とjQueryリストの両方に7,000以上のアイテムがあり、ループが繰り返されるため、私のアプローチはすでに遅くなっています。私はおそらく地図を使って物事をスピードアップする方法を見つけようとしてきましたが、知識が限られているため、頭を悩ませることができません。誰か助けてもらえますか？https://jsfiddle.net/bt9xncea/
<ul>
<li>Paris</li>
<li>London</li>
<li>Puntarenas</li>
<li>Lisbon</li>
<li>Balochistan</li>
<li>Bonn</li>
<li>Helsinki</li>
<li>Moscow</li>
<li>San Jose</li>
<li>Paris</li>
<li>Madrid</li>
<li>Rome</li>
</ul>
var CityList = ["San Jose", "Alajuela", "Caldera", "Puntarenas", "Sisak-Moslavina", "Dalmatia", "", "Thatta", "Sindh", "Punjab", "Islamabad", "Balochistan", "Karachi"];
$("ul li").hide()
var elementText = "";
$.each(CityList, function(index, City) {
$('ul li').each(function(dropindex) {
elementText = $("ul li:eq(" + dropindex + ")").text()
if (elementText === City) {
$("ul li:eq(" + dropindex + ")").show();
return false;
}
});
});
簡略化できることがいくつかあります。liオブジェクトをループしている間は$(this)、現在のli要素に到達するために使用できます。他のセレクターを使用する必要はありません。
使用するセレクターと関数呼び出しがはるかに少ないため、これによりパフォーマンスが向上すると思います。
また、cityListループの方が安いので$('ul li').each、$.each(CityListループをループの外側に配置します。
$("ul li").hide().each(function(dropindex) {
var $cur = $(this);
var elementText = $(this).text();
$.each(CityList, function(index, City) {
if (elementText === City) {
$cur.show();
}
});
});
https://jsfiddle.net/a5fm4tcx/
ただし、hide()7000要素を実行するだけでも少し時間がかかります。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加