CODEWITHSUNDEEP
jqueryarrayslistforeachiteration
Sebastian Rush
Sebastian Rush

Reputation: 538

jQuery wrap list elements containing the same text part

I have this HTML list:

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

I want to wrap the list elements containing the same Firstname like this

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

I habe tried to iterate through the list to set up a array and create the new elements by writing this code (getID spilts the text to Bob and Smith for example):

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

But all I get is this:

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

...and so on.

Can you help me fixing this?

Upvotes: 0

Views: 101

Answers (2)

straeger
straeger

Reputation: 402

Here is also a small fiddel which shows how to recreate/rearange the li elements using a small cache object.

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

Upvotes: 0

Rohan Kumar
Rohan Kumar

Reputation: 40639

Try this,

$("#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

Upvotes: 1

Related Questions