4

ここにある他の2つの提案を試して、単語の周りにスパンを配置しましたが、そのたびにスパンがテキストの上に表示され、テキストの周りには表示されませんでした.

次のコードがあります。

<div class="dateCalendar">
June 10
</div>

私が現在使用しているjQueryは次のとおりです。

$('.dateCalendar').html(function(i, v) { return v.replace(/\s(.*?)\s/, ' $1 '); });

HTML出力はこれを示しています：

<div class="dateCalendar">
<span></span>
June 10
</div>

理想的には、月をスパンでラップし、日付を別のスパンでラップして、CSS で異なるスタイルを設定できるようにしたいと考えています。

知っておくと役立つかもしれないいくつかのメモ:

  • .dateCalendar はページに複数回表示されます
  • 日付は、変更できないWordpressプラグイン内のPHPでコーディングされています
4

3 に答える 3

4

試す

$('.dateCalendar').html(function(i, v) { 
    return $.trim(v).replace(/(\w+)/g, '<span>$1</span>'); 
});

デモ:フィドル

于 2013-08-11T17:07:58.233 に答える
1

これはどうですか-2つの単語のみを想定して:

ライブデモ

$('.dateCalendar').each(function () {
  var cal = $(this); 
  var texts = $(this).text().split(" ");
  cal.empty();                   
  $.each(texts,function (i, text) {
    cal.append('<span class="' + (i == 0 ? "month" : "year") + '" >'+text+'</span>');
  });
});
于 2013-08-11T17:35:03.710 に答える
0

あなたはほとんどそこにいます。失敗する理由は、結果のコンテンツがタグ内にラップされていないためです。

http://jsfiddle.net/ZymGK/1/を参照してください。基本的に、これはspan各「単語」（スペースで区切られた）の要素の配列を返し、各div要素の内容を class で作成し.dateCalendarます。

于 2013-08-11T17:15:04.750 に答える