2

オプションの順序を切り替える必要があるフォームがあります。ページが読み込まれた後、条件付きで（毎回ではなく）切り替える必要があります。このタスクにjqueryを使用するのは理にかなっています。

最初にレンダリングされるHTMLは次のとおりです。

<ol class="choices-group">
  <li class="choice">
    <label for="first">
      <input id="first" type="radio" value="25.0">$25</input>
    </label>
  </li>
  <li class="choice">
    <label for="second">
      <input id="second" type="radio" value="50.0">$50</input>
    </label>
  </li>
  <li class="choice">
    <label for="third">
      <input id="third" type="radio" value="100.0">$100</input>
    </label>
  </li>
</ol>

jqueryで要素の順序を逆にして、次のようにします。

<ol class="choices-group">
  <li class="choice">
    <label for="third">
      <input id="third" type="radio" value="100.0">$100</input>
    </label>
  </li>
  <li class="choice">
    <label for="second">
      <input id="second" type="radio" value="50.0">$50</input>
    </label>
  </li>
  <li class="choice">
    <label for="first">
      <input id="first" type="radio" value="25.0">$25</input>
    </label>
  </li>
</ol>

この例では3つのオプションがありましたが、1から7までの任意の数にすることができます。

誰かがこれを行うための良い方法を見ることができますか？

4

4 に答える 4

3

これはそれを行う必要があります：

$(".choices-group").html($(".choice").get().reverse());

実用的な例を参照してください。

http://jsfiddle.net/epignosisx/bX3Kf/

于 2012-10-15T15:26:36.300 に答える
1

$.each()の要素を取得し、ol順序を逆にしてから、を使用し$.html()てolを書き換えます。

この例については、こちらのjqueryマニュアルを参照してください。

于 2012-10-15T15:21:50.047 に答える
1

jqueryの使用：

$('.choices-group li').each(function(){
   $(this).parent().prepend(this);      
});​​​​​​

jsFiddleを参照してください

ただし、純粋なjavascriptメソッドを次のように使用する方が高速です。ObjetNode.insertBefore（NewNode、NodePosition）;

于 2012-10-15T19:45:12.517 に答える
1

これはかなり単純なはずです。Javascriptオブジェクトを使用して、キー部分（プロパティ名）が条件の評価に使用される値であり、値がDOMへの参照である場合の管理に役立てます。ol次に、それらを正しい順序で追加し直します。

var temp = {};
$.each('ol li', function(k, v){
   var $this = $(v);
   temp[$this.attr('someAttribute')] = $this;
});

/*some sorting logic and appending them back*/

このようにして、順序を逆にするだけでなく、好きなように並べ替えることができます。

于 2012-10-15T15:26:51.590 に答える