セレクタでこのjquery-codeをスピードアップする -- jquery フィールド と jquery-selectors フィールド と performance フィールド 関連 問題

Speeding up this jQuery-code with selectors












2
vote

問題

日本語

私は多くのオブジェクトのリストのためのフィルタを書きました。ユーザーはvia radio-buttonsでオプションを選択できます。

フィルタ機能内で両方のラジオグループ/セットのチェックラジオボタンを選択します。

<事前> <コード> if ( $('#filter input[name="interval"]:checked').val() == 'all' ) { if( $('#filter input[name="day"]:checked').val() == 'all' ) { var searchSelector = "li"; } else { var searchSelector = "li[data-day=" + $('#filter input[name="day"]:checked').val() + "]"; } } else { if( $('#filter input[name="day"]:checked').val() == 'all' ) { var searchSelector = "li[data-interval=" + $('#filter input[name="interval"]:checked').val() + "]"; } else { var searchSelector = "li[data-interval=" + $('#filter input[name="interval"]:checked').val() + "]" + "li[data-day=" + $('#filter input[name="day"]:checked').val() + "]"; } }

jQueryパフォーマンスルール jQueryオブジェクトをキャッシュする必要があります。通常、この練習は常に機能します - しかしこの場合、私の2番目のラジオボタンの値は常に最初のチェック値の値を出力します。

どんなアイデア、私はこのjQueryコードを単純化することができますか?

ありがとう

これはボタンのHTMLです:

<事前> <コード> <form id="filter"> <fieldset> <label> <input type="radio" name="interval" value="all"> all</label> <label> <label> <input type="radio" name="interval" value="hourly"> hourly</label> <label> <input type="radio" name="interval" value="daily"> daily</label> <label> <input type="radio" name="interval" value="weekly"> weekly</label> <label> <input type="radio" name="interval" value="monthly"> monthly</label> <label> <input type="radio" name="interval" value="yearly"> yearly</label> </fieldset> <fieldset> <label> <input type="radio" name="day" value="all"> all</label> <label> <input type="radio" name="day" value="monday"> monday</label> <label> <input type="radio" name="day" value="tuesday"> tuesday</label> <label> <input type="radio" name="day" value="wednesday"> wednesday</label> <label> <input type="radio" name="day" value="thursday"> thursday</label> <label> <input type="radio" name="day" value="friday"> friday</label> </fieldset> </form>

そしてこれは私のリストが次のように見えるものです:

<事前> <コード> <li data-day="monday" data-interval="weekly">foo</li> <li data-day="friday" data-interval="yearly">foo</li>
英語

i wrote a filter for a list of many objects. Users can choose their options in via radio-buttons.

Within my filter functionality i select the checked radio buttons of both radio groups/sets:

if ( $('#filter input[name="interval"]:checked').val() == 'all' ) {     if( $('#filter input[name="day"]:checked').val() == 'all' ) {         var searchSelector = "li";     } else {         var searchSelector = "li[data-day=" + $('#filter input[name="day"]:checked').val() + "]";     } } else {     if( $('#filter input[name="day"]:checked').val() == 'all' ) {         var searchSelector = "li[data-interval=" + $('#filter input[name="interval"]:checked').val() + "]";     } else {         var searchSelector = "li[data-interval=" + $('#filter input[name="interval"]:checked').val() + "]" + "li[data-day=" + $('#filter input[name="day"]:checked').val() + "]";     } } 

As it's said in the jQuery Performance Rules i should cache jQuery objects. Usually this practice always works — but in this case the values of my second radio buttons always outputs the value of the first checked value.

Any ideas, how i can simplify this jQuery code?

THANKS

Here is the HTML for the buttons:

<form id="filter">     <fieldset>         <label>             <input type="radio" name="interval" value="all">             all</label>         <label>         <label>             <input type="radio" name="interval" value="hourly">             hourly</label>         <label>             <input type="radio" name="interval" value="daily">             daily</label>         <label>             <input type="radio" name="interval" value="weekly">             weekly</label>         <label>             <input type="radio" name="interval" value="monthly">             monthly</label>         <label>             <input type="radio" name="interval" value="yearly">             yearly</label>     </fieldset>     <fieldset>         <label>             <input type="radio" name="day" value="all">             all</label>         <label>             <input type="radio" name="day" value="monday">             monday</label>         <label>             <input type="radio" name="day" value="tuesday">             tuesday</label>         <label>             <input type="radio" name="day" value="wednesday">             wednesday</label>         <label>             <input type="radio" name="day" value="thursday">             thursday</label>         <label>             <input type="radio" name="day" value="friday">             friday</label>     </fieldset> </form> 

And this is what my list looks like:

<li data-day="monday" data-interval="weekly">foo</li> <li data-day="friday" data-interval="yearly">foo</li> 
</div
        

回答リスト

2
 
vote
vote
ベストアンサー
 

次は

をするべきです <事前> <コード> FormulaArray6

例: http://www.jsfiddle.net/gaby/xpmn5/ < / P>

 

The following should do it

var $interval = $('#filter input[name="interval"]'),     $day = $('#filter input[name="day"]');      $('#filter input:radio').change(function(){         var interval = $interval.filter(':checked').val() || 'all',             day = $day.filter(':checked').val()|| 'all',             searchSelector = 'li';              searchSelector += (day != 'all') ? '[data-day=' + day  + ']' : '';             searchSelector += (interval != 'all') ? '[data-interval=' + interval  + ']' : '';           }         /*do what you want with the selector here*/     }); 

example: http://www.jsfiddle.net/gaby/xPMn5/

</div
 
 
     
     
1
 
vote

このようなことをしないのはなぜ FormulaArray9の 998877628 FormulaArray8 に適用されていると仮定しています。 / CODE> inteve ...

<事前> <コード> J70

私はまたあなたがこれらの 998877631 の可視性を切り替えると仮定しています...最初の行には、 998877632 をチェーンに添付して呼び出して呼び出します。コード> J73 このコードブロック

の終わりに
 

Why not do something like this -- I am assuming that the searchSelector is being applied to a .find() later in the code as there is no ul defined to look within...

// This may also be $("li") -- I was assuming you were using it for a .find() var $result = $something.find("li"); // This finds "all" the possible results - now to filter we need the values: // Use || 'all' to default to "all" if there is no "checked" filter var interval = $('#filter input[name="interval"]:checked').val() || 'all'; var day = $('#filter input[name="day"]:checked').val() || 'all';  // if we need to filter this list at all: if (day != 'all' || interval != 'all') {   // store the new result of the filter   $result = $result.filter(function() {     // check the .data-day .data-interval attributes on this directly:     if (day != 'all' && this.data-day != day) return false;     if (interval != 'all' && this.data-interval != interval) return false;     return true;   }); } 

I am also assuming you are using this to toggle the visibility of these <li> somehow... In the first line you could attach .hide() to the chain and call $results.show() at the end of this block of code

</div
 
 

関連する質問

246  Webアプリケーションでストレステストを実行する  ( Performing a stress test on web application ) 
過去に、私はMicrosoft WebアプリケーションのストレスツールとPylotをストレステストWebアプリケーションを使用しました。簡単なホームページ、ログインスクリプト、およびサイトのウォークスルー(カートとチェックアウトにいくつかのアイテムを追加するe...

146  密封されたクラスは実際にパフォーマンス上の利点を提供しますか?  ( Do sealed classes really offer performance benefits ) 
私はあなたが追加のパフォーマンス上の利益を得るためにあなたのクラスをシールされるようにあなたのクラスをマークするべきであることをたくさんの最適化のヒントに出会いました。 私はパフォーマンスの違いを確認して見つけるためにテストをいくつか実行しました。私は何か悪い...

793  タイプから新しいオブジェクトインスタンスを作成する方法  ( How to create a new object instance from a type ) 
は、コンパイル時にオブジェクトの Type を必ずしも知っているとは限りませんが、 Type のインスタンスを作成する必要があるかもしれません。 <コード> Type から新しいオブジェクトインスタンスを取得しますか? ...

61  最初の10000の素数のほとんどの効率的なコード?  ( Most efficient code for the first 10000 prime numbers ) 
最初の10000の素数を印刷したいです。 誰かが私にこれのための最も効率的なコードを与えることができますか? 明確化: あなたのコードがN&GTに非効率的であるかどうかは関係ありません コードのサイズは関係ありません。 値をハードコードすることはできません。...

2520  データベースのインデックス作成はどのように機能しますか? [閉まっている]  ( How does database indexing work ) 
閉鎖。この質問はもっと焦点を絞ったにする必要があります。現在答えを受け付けていません。 この質問を改善したいですか?このPOST...

0  DMVビューはDBからEveyOneを蹴ることなくリセットできますか?  ( Can the dmv views get reset without kicking eveyone out of the db ) 
DMVビューをリセットする方法の3つの方法を示す投稿を見ました: SQLサービスをリセット データベースを検出する データベースを閉じる これらの方法のすべては、システムを数瞬間の間オフラインにすることを要求するようです。データベースの使用を中断すること...

331  πの値を得るための最速の方法は何ですか?  ( What is the fastest way to get the value of %cf%80 ) 
個人的な課題として、πの値を得るための最速の方法を探しています。具体的には、 M_PI など、 M_PI 、またはBetunの番号をハードコーディングするの使用に関与しない方法を使用しています。 以下のプログラムは私が知っているさまざまな方法をテストします。イ...

176  「メモリリーク」の解剖学  ( Anatomy of a memory leak ) 
.NETの観点: メモリリーク? アプリケーションが漏洩するかどうかを判断するにはどうすればよいですか。効果は何ですか? メモリリークを防ぐにはどうすればいいですか? アプリケーションがメモリリークがある場合は、プロセスが終了するか、または殺されたときに...

70  Pythonの最も効率的なグラフデータ構造は何ですか? [閉まっている]  ( What is the most efficient graph data structure in python ) 
この質問はスタックオーバーフローガイドラインを満たしていません。現在答えを受け付けていません。 この質問を改善したいですか? ...

47  C ++のCPUスロットル  ( Cpu throttling in c ) 
私は、集中的な計算をしている特定のスレッドの最大CPU負荷を設定するためのエレガントな方法があるかどうか疑問に思いました。 今すぐスレッド内の最も時間がかかるループ(圧縮のみをします)、 GetTickCount() Sleep() をハードコードされた値...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有