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>

我想像这样包装包含相同名字的列表元素

<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

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));
});

工作小提琴

于 2013-07-09T08:05:01.677 回答
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 回答