0

私はこのHTMLリストを持っています：

<li class="lv3"><a class="catLink" href="#">Bob Smith</a></li>
<li class="lv3"><a class="catLink" href="#">Bob Stone</a></li>
<li class="lv3"><a class="catLink" href="#">Bob Miller</a></li>
<li class="lv3"><a class="catLink" href="#">John Smith</a></li>
<li class="lv3"><a class="catLink" href="#">John Doe</a></li>
<li class="lv3"><a class="catLink" href="#">Jason McGee</a></li>

このように同じ Firstname を含むリスト要素をラップしたい

<ul>
    <li class="lv2">Bob</li>
    <li class="lv3"><a class="catLink" href="#">Bob Smith</a></li>
    <li class="lv3"><a class="catLink" href="#">Bob Stone</a></li>
    <li class="lv3"><a class="catLink" href="#">Bob Miller</a></li>
</ul>
<ul>
    <li class="lv2">John</li>
    <li class="lv3"><a class="catLink" href="#">John Smith</a></li>
    <li class="lv3"><a class="catLink" href="#">John Doe</a></li>
</ul>
<ul>
    <li class="lv2">Jason</li>
    <li class="lv3"><a class="catLink" href="#">Jason McGee</a></li>
</ul>

リストを反復処理して配列を設定し、次のコードを記述して新しい要素を作成しようとしました (たとえば、getID はテキストを Bob と Smith に送信します)。

var menArr = [];
$(".catLink").wrap("<li class='lv3'>");
$("#getStyles .lv3").each(function() {
    var txt = getID($(this).text());
    $(this).wrapAll("<ul>").before("<li class='lv2'>"+txt+"</li>");
    menArr.push(txt);
});

しかし、私が得るのはこれだけです：

<ul>
    <li class="lv2">Bob</li>
    <li class="lv3"><a class="catLink" href="#">Bob Smith</a></li>
</ul>
<ul>
    <li class="lv2">Bob</li>
    <li class="lv3"><a class="catLink" href="#">Bob Stone</a></li>
</ul>

...等々。

これを修正するのを手伝ってもらえますか?

4

2 に答える 2

0

小さなキャッシュ オブジェクトを使用して li 要素を再作成/再配置する方法を示す小さなフィデルもあります。

http://jsfiddle.net/straeger/WVVdb/1/

$(document).ready(function(){
    var liArray = $('.lv3');
    var sorted = {};

    $.each(liArray, function(index, value){
        var firstName = $(value).text().split(' ')[0];
        if(sorted[firstName] !== undefined){
                sorted[firstName].elements.push(value);
        }else{
                sorted[firstName] = { elements : [value] };
        }
        $(value).remove();
    });

    $.each(sorted, function(index, value){
        console.log(value + index);
        var $ul = $('<ul>', { 'class' : index });
        $ul.append(value.elements);
        $('body').append($ul);
    });    
})
于 2013-07-09T08:11:58.763 に答える