Question

在我的Wordpress页面中，我有许多以歌词为主题的帖子。我希望以不同的方式设计另外的歌词。到目前为止，我已经对基础知识进行了排序，但是我需要帮助使用jQuery为<li>和<ul>添加每行歌词的前缀和后缀，以便使用CSS样式将样式应用于奇数和偶数行。在这篇文章中看到了（http://stackoverflow.com/questions/358350/alternate-background-colors-for-list-items）。我的HTML目前如下所示：

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

所以，我想知道应用于页面的JS为我插入<li>和</li>标签，以便能够以不同的方式设置每个备用行的样式。感谢

Answer 1

你可以这样做：

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

Demonstration

如果你有多个ul，你需要像

这样的东西

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

当然，就像在DOM上应用的几乎所有代码一样，必须在DOM准备好之后调用它。因此，您必须将代码包装在准备好的回调中;

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

Answer 2

您可以使用以下功能：

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

Answer 3

简单，试试这个：

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

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

使用jQuery将<li>和</li>添加到<ul> </ul>

3 个答案: