1

JavaScript または CSS を使用してページ上の文字列を変更する方法。

コンマで区切られたタグを含む約50の要素があります。

 <a name="tagslist">Skrillex, dubstep, dance</a>

JavaScript を使用して、これらの単語をそれぞれ取り、それらを異なるスタイルにして、コンマで区切られているように見えないようにしますが、別の行にあるようにします。問題は、ページにさまざまな量のタグ リストが存在する可能性があることです。

これを簡単に達成できる方法はありますか？

4

5 に答える 5

2

まず、最後のミレニアムから抜け出し、次のHTMLを使用します。

<div id="tagslist">Skrillex, dubstep, dance</div>

次に、これを行うことができます：

var elm = document.getElementById('tagslist');
elm.innerHTML = elm.innerHTML.replace(/, /g,'<br />');

もちろん、次のようなもっと複雑なことをすることもできます。

elm.innerHTML = "<div class='tag'>"+elm.innerHTML.replace(/, /g,"</div><div class='tag'>")+"</div>";

または、実際のDOMメソッドを使用することもできます。

var elm = document.getElementById('tagslist'), tags = elm.firstChild.nodeValue.split(", "),
    l = tags.length, i, div;
elm.removeChild(elm.firstChild);
for( i=0; i<l; i++) {
    div = elm.appendChild(document.createElement('div'));
    div.appendChild(document.createTextNode(tags[i]));
    // apply styles, className, etc. to div
}
于 2013-02-10T21:52:41.933 に答える
1 
$('a[name="tagslist"]').html(function(_, html){
    var arr = [],
        tags = html.split(/\s*,\s*/);

    for (var i=0; i<tags.length; i++)
        arr.push('<div class="whatever">' + tags[i] + '</div>');

    return arr.join('');
});
于 2013-02-10T21:50:55.800 に答える
0

http://ivaynberg.github.com/select2/#tagsなどの既存のライブラリの使用を検討してください

于 2013-02-10T21:52:17.310 に答える
0

異なるスタイルを設定するには、アンカー タグごとに個別のアンカー タグを用意する必要があります。それらの間の改行については、それらの間に br タグを入れることができます。

于 2013-02-10T21:54:40.807 に答える
-1

あなたがしたいことは不可能です。より理想的な解決策は、htmlを次のようにレンダリングすることです。

<span class="tagslist">
    <a href="#">Skrillex</a>
    <a href="#">dubstep</a>
    <a href="#">dance</a>
</span>

このようにして、CSSを使用してスタイルを完全に制御できます。

于 2013-02-10T21:51:45.883 に答える