2

私のWordpressページには、歌詞をフィーチャーした投稿がたくさんあります。歌詞の行ごとに異なるスタイルを設定したいと考えています。これまでのところ、基本は整理されていますが、この投稿で見たように、jQuery を使用して歌詞の各行に接頭辞と接尾辞を付け、CSS スタイルを使用して奇数行と偶数行にスタイルを適用するには、助けが必要です<li>( <ul>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>

<li>そのため、ページにどのJSを適用してそれらと</li>タグを挿入し、各行を異なるスタイルにできるか疑問に思っています。ありがとう

4

3 に答える 3

3

あなたはこれを行うことができます ：

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

デモンストレーション

複数の 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>';
    }));​​​​​​​​​​​​​​​​
});

</p>

于 2012-12-09T18:31:37.433 に答える
1

次のような関数を使用できます。

var html = $('#lyricstext ul').html().split('\n').map(function(text){
    return '<li>'+text+'</li>';
});
$('#lyricstext ul').html(html);​​​​​​​​​​​​​​​​
于 2012-12-09T18:32:45.543 に答える
0

簡単です、これを試してください：

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

$.each(lines, function() {
    $ul.append('<li>' + this + '</li>');
    $ul.find('li:odd').addClass('alternate');
});​
于 2012-12-09T18:43:26.713 に答える