-1

私は5つのhtml要素を持っています

<a href="#"><img src="image1.jpg" /></a>
<a href="#"><img src="image2.jpg" /></a>
<a href="#"><img src="image3.jpg" /></a>
<a href="#"><img src="image4.jpg" /></a>
<a href="#"><img src="image5.jpg" /></a>

再注文したい

<a href="#"><img src="image5.jpg" /></a>
<a href="#"><img src="image1.jpg" /></a>
<a href="#"><img src="image2.jpg" /></a>
<a href="#"><img src="image3.jpg" /></a>
<a href="#"><img src="image4.jpg" /></a>

jqueryでこれを達成するにはどうすればよいですか（可能であればプラグインはありません）。

ありがとう

4

3 に答える 3

6

あなたがこのHTMLを持っていると仮定します：

 <div id=parent>
   <a href="#"><img src="image5.jpg" /></a>
   <a href="#"><img src="image1.jpg" /></a>
   <a href="#"><img src="image2.jpg" /></a>
   <a href="#"><img src="image3.jpg" /></a>
   <a href="#"><img src="image4.jpg" /></a>
  </div>

そして、あなたは画像のsrcで注文したい、そしてあなたはこれをすることができます：

function compareStrings(a,b) {
  if (a>b) return 1;
  else if (a<b) return -1;
  return 0;
}
$('#parent').append($('a').detach().sort(function(a,b){
  return compareStrings($('img',a).attr('src'), $('img',b).attr('src'));
}));

デモンストレーション

于 2013-02-21T15:53:09.453 に答える
1

私は提案します：

$('img').last().parent().insertBefore($('img').first().parent());

再注文の具体的な基準に関する情報はありませんが、特に有用なソリューションを提供することは困難です。

上記は、画像要素に基づいて要素を並べ替えたいと想定しています（これは、最もよく表示される要素であるため、明らかにインデックス/番号が付けられています）が、a代わりに次を使用します。

$('a').last().insertBefore($(this).prevAll(':last'));
于 2013-02-21T15:39:03.053 に答える
1

私はこのコードが非常にうまく機能することを発見しました（私のものではありません）：ブログ投稿：http：//james.padolsey.com/javascript/sorting-elements-with-jquery/
ソース ：http ：//github.com/padolsey/jQuery-Plugins / tree / master / sortElements /

例:(ブログから言い換えます）

<ul>
    <li>Banana</li>
    <li>Carrot</li>
    <li>Apple</li>
</ul>

ライブラリを含めてから、これを実行します。

$('li').sortElements(function(a, b){
    return $(a).text() > $(b).text() ? 1 : -1;
});

結果：

<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Carrot</li>
</ul>
于 2013-10-05T01:28:01.120 に答える