-1

次の構造があるとします。

<ul>
    <li data-conference="Conference1" >Spain</li>
    <li data-conference="Conference1" >France</li>
    <li data-conference="Conference1" >Germany</li>
    <li data-conference="Conference1" >Italy</li>
    <li data-conference="Conference2" >Austria</li>
    <li data-conference="Conference2" >Poland</li>
    <li data-conference="Conference3" >Russia</li>
    <li data-conference="Conference3" >USA</li>
    <li data-conference="Conference3" >China</li>
</ul>

パフォーマンスを考慮して、これをこれに再配置するための最良の方法（jQueryを使用）は何ですか：

<ul>
    <li>Spain</li>
    <li>France</li>
    <li>Germany</li>
    <li>Italy</li>
</ul>
<ul>
    <li>Austria</li>
    <li>Poland</li>
</ul>
<ul>
    <li>Russia</li>
    <li>USA</li>
    <li>China</li>
</ul>

ありがとう！

4

6 に答える 6

2

全体的な質問（属性ごとに要素をグループ化する）は良いと思います。自分で解決するためにもっと努力するべきでした。

とにかく、属性による要素のグループ化は非常に簡単です。attribute value -> [element, ...]オブジェクトを使用してマップを作成できます。

var groups = {};

$('li[data-city]').each(function() {
    var attr = $(this).attr('data-city'),
        group = groups[attr];
    if(!group) {
        group = groups[attr] = [];
    }
    group.push(this);
});

これで、DOM 要素のリストのコレクションができました。コレクションを繰り返し処理し、それに応じて HTML リストを作成できます。

例えば：

for(var group in groups) {
    var $list = $('<ul />');
    $list.append(groups[group]);
    // now append $list somewhere
}

オブジェクトの処理方法の詳細については、Working with Objects [MDN] を参照してください 。

要素への参照がある限り、たとえばNodeList. を使用する代わりに.each、「通常の」forループを使用してそのリストを繰り返すことができます。

于 2012-05-06T12:45:41.773 に答える
2

これらのリストに非常に多くの都市が含まれていない限り、パフォーマンスについて心配する必要はありません。私が取る唯一のパフォーマンスの考慮事項は、DOMへの書き込みを最小限に抑えて再描画/リフローを回避することです。このユースケースでは、コードの明快さがはるかに重要だと思います。

そうは言っても、私はこれをhttp://jsfiddle.net/XWufy/のようなもので実装します。

于 2012-05-06T12:53:02.820 に答える
1

どうぞ：

(function () {
    var $list = $( '#list' );
    var lists = {};
    var $newLists = $();

    $list.children().each( function () {
        var city = $( this ).data( 'city' );
        if ( !lists[ city ] ) lists[ city ] = [];
        lists[ city ].push( this );
    });

    $.each( lists, function ( city, items ) {
        var $newList = $( '<ul />' ).append( items );
        $newLists = $newLists.add( $newList );
    });

    $list.replaceWith( $newLists );            
}());

ライブデモ: http://jsfiddle.net/rjt9W/6/

ところで、コードは、リストの ID が"list". この行のセレクターを置き換えます

var $list = $( ... );

UL要素が適切に選択されるようにします。

于 2012-05-06T13:08:47.190 に答える
0

これを試して：

<ul id="first"></ul>// you can create the ul tags by using JavaScript

$("li").each(function(){
      data  = $(this).attr("data");
      if (data == "Conference1") {
         txt = $(this).text();
         $("<li>" + txt + "</li>").appendTo("ul#first");
      }
})
于 2012-05-06T12:58:25.277 に答える
0

データ属性をオブジェクト プロパティとして使用してそれらを並べ替え、それらをループして新しい html を構築します。これで始められるはずです：

var list = {};
// for each item
list[item.data('city')] = item.text();

// for each property of list
var ul = $('<ul>');
// for each listItem in current list
var li = $('<li>').text(listItem);
ul.append(li);
于 2012-05-06T12:42:28.950 に答える