更新私はのように、div要素のリストを持っているのdiv

Question

のリスト：

categories1内部名によって発注

<div class="categories" onmouseover="this.style.background='#CCCCCC'" onmouseout="this.style.background='#FFFFFF'"> 
    <div class="categories1"> 
     Andy 
    </div> 

    <div class="categories2"> 
     Link to Andy 
    </div> 
</div> 

<div class="categories" onmouseover="this.style.background='#CCCCCC'" onmouseout="this.style.background='#FFFFFF'"> 
    <div class="categories1"> 
     Mark 
    </div> 

    <div class="categories2"> 
     Link to Mark 
    </div> 
</div> 

... 

<div class="categories" onmouseover="this.style.background='#CCCCCC'" onmouseout="this.style.background='#FFFFFF'"> 
    <div class="categories1"> 
     Yuri 
    </div> 

    <div class="categories2"> 
     Link to Yuri 
    </div> 
</div> 

。

Through AJAX/jQueryサーバーに新しいカテゴリを追加し、この操作の後にクライアント側のリストを更新したいと思います。

だから、私はこれらの方法に考えた：

1. は、挿入の後に、データベースからすべてのカテゴリを選択して、全体のhtmlを作成し、新しいものと古いものをリフレッシュします。コーディングとしてのより高速なソリューションですが、リストが長すぎる場合はオーバーヘッドが大きくなります。

2. 作成した要素のみをサーバーからロードし、DOM trought jQueryをブラウズし、要素を配置する場所（英字の順番を確認）をチェックして追加します。

いずれも私にはうれしくないので、いくつかの提案/ヒント/アイデアをお聞かせします。

ありがとう

Answer 1

新しい要素を取得するためのAJAX呼び出しを行います。あなたの担当ディビジョンに追加してください。使用して、名前で次にソートすべてのdivの - >

//get a raw array of dom nodes 
var items = $('.categories1').get(); 

//empty out the container 
$('#container').empty(); 

//use Array's prototype sort() method 
items.sort(function(x,y) { 
    return $(x).text() > $(y).text(); 
}); 

//iterate through their sorted order, appending their parent back to the container 
$(items).each(function() { 
    $('#container').append($(this).parent()); 
}); 

は、ここでのアクションでそれを見るためにフィドルだ - jQueryのは非常に迅速にすべてをつかむことができます - 私はあなたの第二の提案で行くことに傾いているはずだ

Answer 2

http://jsfiddle.net/rz3Ww/要素はcategory1のクラスであり、そこから配列にテキストを解析するのはtrivalです。それから、あなたの新しい要素の直前に来る要素を見つけ、それをDOMで見つけて、後に追加します。

Answer 3

2つのことは、あなたの質問を読んだ後、心に来る：

1. あなたがリストについて話しているが、あなたはdiv要素を使用しています。これは世界の終わりではありませんが、順序付けられていないリスト（<ul>）を使用するほうが意味的に適切です。
2. jQueryを起動したので、この問題はjQuery Templates pluginの使用を求めています。クライアント側のデータバインディングを実行しようとしています.JQueryテンプレートがこれを行うのに役立ちます。