Question

我有这个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>

我想包含包含相同名字的列表元素，如此

<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>

......等等。

你能帮我解决这个问题吗？

Answer 1

试试这个，

$("#getStyles .lv3").each(function() {
    txt=$(this).text().split(' ')[0];
    if(!$('#result').find('.'+txt).length)
    {
        $('#result').append('<ul class="'+txt+'"><li class="lvl2">'+txt+'</li></ul>');  
    }    
    $('#result').find('.'+txt).append($(this));
});

Working Fiddle

Answer 2

这里也是一个小小提琴，展示了如何使用小型缓存对象创建/重新排列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);
    });    
})

jQuery包装列表元素包含相同的文本部分

2 个答案: