¿Yo Quiero jQuery？

セットアップ

あなたは、与えられた簡単なWebページを 11個の要素と：

• 順番にinputIDがi1から10の要素i10
• outputIDを持つ1つの要素out

input要素にはvalue、HTMLソースで定義された属性があります。与えられた入力の値は、から0までの整数10です。

このWebページにはコアjQuery 1.10.1ライブラリ（フィドルで見られる）が装備されており、DOMが読み込まれるとすぐにコードブロックを実行します。

チャレンジ

6つの特定の課題を以下に示します。いずれの場合も、目的はの関数を計算しinput、計算結果をの内部HTMLに配置することoutputです。各課題は、他の課題から独立して解決されるべきです。課題の解決策は、計算/出力を実装するコードのブロックです（たとえば、フィドルの「Javascript」ウィンドウのコード）。ソリューションの長さは、このコードブロックの長さ（バイト単位）です。

これはすべて、かなり興味深い制限ではないとしても、非常に単純に思えます。

あなたのコードは...

1. jQuery関数$()を呼び出して引数を渡す

2. 変数を定義して使用する

3. 使用する this

4. 任意のjQueryオブジェクトの任意のプロパティを読み取る（.length最も役立つ）

5. 関数/ラムダを定義します。これらは後で呼び出され、変数に格納され、引数として渡されます。関数はreturn、必要に応じて引数と値を受け入れることができます。

6. jQuery DOMトラバーサルメソッドのいずれかを呼び出す

7. 任意の呼び出しのjQuery DOM操作方法を、除いてwidth、height、innerWidth、innerHeight、outerWidth、outerHeight、offset、position、replaceAll、replaceWith、scrollLeft、scrollTop、css、prop、removeProp、呼び出されない可能性があります

8. 演算子を使用：オブジェクトの作成{}; 配列の作成/インデックス参照/フィールド参照[]、関数/メソッドの呼び出し()、文字列の連結+、および割り当て=

9. 文字列リテラルを使用する

あなたのコードは...

1. 上記以外の演算子を使用する

2. 使用任意の文字列リテラルではありませんリテラル

3. 呼び出し任意の具体的に除外上記以外の関数/メソッド

4. 使用任意の制御構造やキーワードを（例えばfor、while、try、if、with、など）、除くthis、var、let、関数やラムダ

5. でDOMを操作する任意のコードの注入の結果は（より下記参照）する方法

6. 上記以外の非ユーザー定義変数または非ユーザー定義フィールド/プロパティにアクセスする

6つの課題

1. すべてのinput値の合計を計算し、結果をの内部HTMLに配置しoutputます。

2. すべてのinput値の最大値を計算し、結果をの内部HTMLに配置しoutputます。

3. すべてのinput値の積を計算し、<= 2その結果をの内部HTMLに配置しoutputます。すべての入力値がある場合は> 2、場所0の内側のHTMLの中へoutput。

4. すべてのinput値のモーダル値（つまり、頻度が最も高い値）を計算し、結果をの内部HTMLに配置しoutputます。モーダル値が一意でない場合は、いずれかのモーダル値をの内部HTMLに配置しoutputます。

5. させるI1入力の値もi1、I2入力の値もi2入力値のシーケンスが場合など、I1... I10を形成フェンス付きのI1 < I2ところ、"TRUE"うち内側のHTMLへoutput。それ以外の場合"FALSE"は、出力の内部HTMLに配置します。具体的には、フェンスの条件はI1 < I2 > I3 < I4 > I5 < I6 > I7 < I8 > I9 < I10です。

6. input昇順でソートされたすべての値のコンマ区切りリストを、の内部HTMLに配置しoutputます。

得点

コンテストの勝者は、最大数の課題に対する正しい解決策を提出するプログラマーです。同点の場合、勝者は、最小の総ソリューション長（すべてのソリューションの長さの合計）を持つプログラマーです。したがって、これはコードゴルフのマイナーバリアントです。

重要な注意事項

DOM inputsの最終状態にoutputID outと正しく計算された値を持つ要素が含まれている限り、ソリューションはDOMを壊してしまう可能性があります（削除、視覚的な破片として表示される新しい要素の作成など）。

ソリューションは、式を評価したりコードを実行したりする機能を除いて、高度なjQueryセレクターとCSS3を利用できます。

ソリューションは、ドキュメントのHTMLソースを変更できません。すべてのDOM操作は、jQueryを介してスクリプトで発生する必要があります。

ソリューションは、DOMトラバーサル/操作中に、いかなる種類のコードも挿入できません。これにはscript、要素の書き出し、コードを含むイベント属性の書き出し、CSS3のexpression（IE）またはcalc機能の利用が含まれます（これらに限定されません）。この課題は、セットとツリーを使用した創造的な思考、およびjQueryの巧みな使用に関するものです。コードをDOMに忍び込むことや、オペレーターの制限を回避することではありません。私は、これに基づいてソリューションを失格にする権利を留保します。

すべてのソリューションは実現可能であり、それぞれ400バイト未満で実装できます。もちろん、ソリューションは400バイトを超えるか、400バイトよりはるかに短い場合があります。これは、6つの問題すべてが妥当な量のコードを使用して解決できるという私の基本的な保証にすぎません。

最後に：疑問がある場合は、質問してください。:)

例

仮想的な挑戦を考えてみましょう：「3つの以上の場合inputの値は、場所を5に等しい"TRUE"の内側のHTMLの中にoutput、それ以外の場合は配置"FALSE"の内側のHTMLにoutput。」

1つの有効なソリューションは次のとおりです。

F = () => $('body').append( '<a>TRUE</a>' );
$('input').each( F );
F();
$('a:lt(3)').html( 'FALSE' );
$('#out').html( $('a:eq(' + $('input[value="5"]').length + ')') );

最高のjQuerierが勝ちますように！;）

1.偶数入力の合計、100 94バイト

a=$();(e=$('*:odd')).map(i=>a=a.add(e.slice('0',e.eq(i).val()).clone()));$(out).html(a.length)

使い方 ：

• a=$(); ：新しいオブジェクトを作成する a
• e=$('*:odd')：ページ上のすべての奇妙な要素を取得して、に割り当てますe。興味深いことに、ページactualylのすべての奇数要素には、すべての偶数入力要素（他のものも含む）が含まれます。
• (e=..).map(i=>...)：オブジェクトの各要素についてe、指定された関数を実行します。ここで、iは現在の要素のインデックスです。
• a=a.add(e.slice('0', e.eq(i).val()).clone())：i ^番目の要素の値を取得し、eそこから多くのオブジェクトを切り出し、eそれらを複製して、に追加しますa。興味深いことに、eには10を超える要素があるため、入力ボックスのすべての値に対して機能します。の非入力要素の場合、e0要素をからスライスするだけeです。
• $(out).html(a.length)：outは、IDを持つ要素ごとにブラウザによって作成されるグローバルです。したがってa、出力要素のhtml にの長さを入れるだけです。

jqueryの$（）はセットとして機能しますが、クローンDOM要素を追加しているため、累積して最終的にすべての偶数の入力値の合計が得られることに注意してください。

2.最大、79 70バイト

a=[];(e=$('*')).map(i=>a[e.eq(i).val()]=e);$(a).map(_=>$(out).html(_))

使い方：

• a=[]; ：新しい配列を作成する a
• e=$('*') ：ページのすべての要素をクエリして保存します e
• (e=..).map(i=>...)：オブジェクトの各要素についてe、指定された関数を実行します。ここで、iは現在の要素のインデックスです。
• a[e.eq(i).val()]=e：（たとえばV）のi ^番目の要素の値を取得し、V ^番目のインデックスに入れます。ここでは、バイトを保存するためだけに使用します。それ以外の場合も機能します。eeaea[e.eq(i).val()]=''
• $(a).map(_=>$(out).html(_))：これは基本的に、各a要素のインデックスを出力要素のhtmlに配置し、毎回オーバーライドします。これは、最後のインデックスに対応する値を持つ出力ノードがa入力の最高値に対応することになります。

3.製品、152 141 133 132バイト

f=(i,g=_=>p=$(i1))=>$('[value='+i+']').map(g);h=p=$();f('1');f('2');f('2',_=>p=p.add(p.clone()));f('0',_=>p=h);$(out).html(p.length)

GOTO0による141-> 133の削減:)

4.モーダル、116 115 102バイト

a=[];(e=$('*')).map(i=>(v=e.eq(i).val(),a[$('[value='+v+']').length]=v));$(out).html($(a).last()['0'])

5.フェンス、158バイト

s="TRUE";g=_=>$("*").slice(A.val(),B.val()).map(_=>s="FALSE");f=a=>(A=$(a),B=A.prev(),g(),A=$(a),B=A.next(),g());f(i2);f(i4);f(i6);f(i8);f(i10);$(out).html(s)

6.ソートされたコンマ区切り値、133 85 86バイト

$('*').map(i=>$('[value='+i+']').map(_=>$(out).append(i+'<a>,')));$("a:last").remove()

仕組み：

• $('*').map(i=>...)：ページからすべての要素を取り出し、それらすべてに対してメソッドを実行iします。は要素のインデックスです。
• $('[value='+i+']').map(_=>...)：それぞれについてi、値がであるすべての要素を取得しi、それぞれのメソッドを実行します。
• $(out).append(i+'<a>,')：値がである各要素の出力要素にiアンカータグを,追加しますi。
• $("a:last").remove() ：最後のアンカータグを削除して、末尾を削除します ,

これは、値i= 0から19（19はページ上の要素の総数）のすべての要素を選択し、値をi,持つ要素がi出現する回数を出力要素に追加するため、機能します。これにより、すべての入力要素が処理され、昇順で並べ替えられます。

最新のFirefoxの所定のJSフィドルページで実行します。

ルールに違反しているものがあればコメントしてください。

面白い挑戦！ここに私たちを始める最初のいくつかがあります：

1.合計、122 112バイト

e=$('*')
e.map(i=>e.slice('0',n=e.eq(i).val()).map(x=>e.eq(n).append('<a>')))
e.text($(':not(a):even>a').length)

各入力nについて<a>、n番目の<input>要素にn 要素を追加します。次に<a>、すべての奇数<input>要素の要素を数えます。

2.最大、91 79バイト

e=$('*')
s=$()
e.map(i=>(s=s.add(e.slice('0',e.eq(i).val()))))
e.text(s.length)

各入力nについて、最初のn個の<input>要素をセットと結合しsます。次に、セットの要素を数えます。

3.製品、157バイト

e=$(s='[value=0],[value=1],[value=2],#out')
f=x=>e.slice('0',x.val()).each(i=>f(x.nextAll(s).first().append('<a>')))
f(e.first())
e.text($('#out a').length);

値nの要素が指定された場合、次の要素で自身をn回呼び出し、その次の要素にを追加する再帰関数<a>。次に、の<a>要素を数えます<output>。

間違いやルール違反があるかどうかをお知らせください。