can select .up_icon#1 but not .down_icon#1
これは、重複するIDが無効なHTMLであり、セレクターをスローするためです。
jQueryでは、ページ全体で一意のIDが必要です。そうでない場合、予期しない動作が発生します。
jQueryIDセレクターのドキュメントから取得
各id値は、ドキュメント内で1回だけ使用する必要があります。複数の要素に同じIDが割り当てられている場合、そのIDを使用するクエリは、DOMで最初に一致した要素のみを選択します。ただし、この動作に依存するべきではありません。同じIDを使用する複数の要素を持つドキュメントは無効です。
HTMLを次のように変更します。
<i class="up_icon" id="1" />
<p class="position">1</p>
<i class="down_icon" id="2" />
.up_icon#1
これで、またはを選択できます.down_icon#2
。
明らかに、単純な数字以外のより説明的な識別子を適用して、何も繰り返されないようにする方法を見つけることができれば。
オプションのデータ属性data-value="1"
を使用して、必要に応じてシーケンスまたはレコードIDを保存することもできます。jQueryセレクターは、データ属性またはクラスの同じ値で問題はありません。