Adding <li> and </li> to <ul> using jQuery

Question

In my Wordpress page I have many posts featuring song lyrics. I wish to style alternate lines of lyrics differently. I so far have the basics sorted, but I need helping using jQuery to prefix and suffix each line of lyrics with <li> and <ul> in order to use CSS styles to apply styles to odd and even lines as I saw in this post (http://stackoverflow.com/questions/358350/alternate-background-colors-for-list-items). My HTML currently looks like the following:

<div id="lyricstext" style="overflow: auto; height: 340px; width: 640px;">
<ul>
Leave me alone
Leave me alone
Leave me alone
So just leave me alone
I said leave me alone
Leave me alone
Leave me alone
I’m not in the mood!
Piss off!
So when I say leave me alone
Nah T don’t play
I’m like Michael Jackson in a non-paedo way
The thought of mad partyin’, debauchery tortures me
My T-shirt reads “Fuck off and don’t talk to me”
Approaching every situation awkwardly
Like I’m mesmerized under some sort of sorcery
Who’s calling me? Don’t know – I’ll ignore it G
If I don’t share my time then is there more for me?
</ul>
</div>

So, I'm left wondering what JS to apply to the page to insert those <li>and </li>tags for me, in order to be able to style each alternate line differently. Thanks

@pimvdb That's what OP wants to make it into <li> blocks. Can't you see the question? — vasanth kumar
– vasanth kumar, Commented Dec 9, 2012 at 18:48
@vasanth kumar: What I mean is that the original HTML is invalid. Your answer relies on this invalid HTML to work. — pimvdb
– pimvdb, Commented Dec 9, 2012 at 19:26

Denys Séguret · Accepted Answer · 2012-12-10 13:17:47Z

3

You can do this :

$('#lyricstext ul').html($('#lyricstext ul').html().split('\n').map(function(v){
    return '<li>'+v+'</li>';
}));

Demonstration

If you have more than one ul you'd need something like

$('#lyricstext ul').each(function(){
    $(this).html($(this).html().split('\n').map(function(v){
       return '<li>'+v+'</li>';
    }));
});

And of course, like almost every code applied on the DOM, it must be called after the DOM is ready. So you have to wrap your code in a ready callback ;

$(function(){
    $('#lyricstext ul').html($('#lyricstext ul').html().split('\n').map(function(v){
        return '<li>'+v+'</li>';
    }));
});

edited Dec 10, 2012 at 13:17

answered Dec 9, 2012 at 18:31

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

JMB Over a year ago

Your example works wonders in jsFiddle, but I can't get it working on my site. I'm using Wordpress so I'm assuming I've called the script in wrong somehow. I'll keep working. Thanks for your response.

Denys Séguret Over a year ago

Do you have more than one ul ? If so you'd need each. I edited with how it can be done.

JMB Over a year ago

No I don't. Per post only one <ul> in play. Like my original example, but the text is a bit longer. There are a couple of other html tags in the middle, but limited to the odd <em> or <strong>. I put the script in my single.php and I know it's loaded from looking at the Page Source, but it has no effect on the text in my post.

Denys Séguret Over a year ago

Is the script executed after the post is loaded ? You might want to check by doing console.log($('#lyricstext ul')) and looking at the console.

JMB Over a year ago

I get two related errors. 1) SyntaxError: unterminated string literal (little green arrow points at the hashtag) and the second ReferenceError: $ is not defined. Thanks again. Any light you can shed?

|

vasanth kumar · Accepted Answer · 2012-12-09 18:32:45Z

1

You can use a function like this:

var html = $('#lyricstext ul').html().split('\n').map(function(text){
    return '<li>'+text+'</li>';
});
$('#lyricstext ul').html(html);

answered Dec 9, 2012 at 18:32

vasanth kumar

594 bronze badges

Comments

palaѕн · Accepted Answer · 2012-12-09 18:43:26Z

0

Simple, try this:

var $ul = $("#lyricstext ul");
var lines = $ul.text().split('\n');

$.each(lines, function() {
    $ul.append('<li>' + this + '</li>');
    $ul.find('li:odd').addClass('alternate');
});

answered Dec 9, 2012 at 18:43

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

Collectives™ on Stack Overflow

Adding <li> and </li> to <ul> using jQuery

3 Answers 3

12 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

12 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related