私のhtmlには次のコードがあります
<p>6565655655|cell</p>
この縦線を削除し、「セル」という単語を丸括弧で囲みます。だから私は以下のような出力が欲しい
<p>6565655655 (cell)</p>
pタグのコンテンツがajax呼び出しによって動的にロードされるときに、jqueryを使用してそれを行う方法。
私のhtmlには次のコードがあります
<p>6565655655|cell</p>
この縦線を削除し、「セル」という単語を丸括弧で囲みます。だから私は以下のような出力が欲しい
<p>6565655655 (cell)</p>
pタグのコンテンツがajax呼び出しによって動的にロードされるときに、jqueryを使用してそれを行う方法。
区切り文字としてパイプを使用して p-tag の内容を分割し、そのように作成された配列、2 番目の要素を括弧で囲んで再挿入します。
ここに例があります:
var splittedString = $("p").text().split("|");
$("p").html(splittedString[0] + " (" + splittedString[1] + ")");
jsFiddle: http://jsfiddle.net/r3c4J/
それを行ういくつかの方法:
var text = '6565655655|cell';
方法 1:
var parts = text.split('|');
$('p').text(parts[0] + ' (' + parts[1] + ')');
方法 2:
$('p').text(text.replace('|cell', ' (cell)');
方法 3:
$('p').text(text.replace(/([0-9]+)\|(.*)/, '$1 ($2)'));
次のようにできます。
$('p').each(function () {
var $txt = $(this).text();
if ($txt.indexOf('|') > 0) {
var txtArray = $txt.split('|');
$(this).html(txtArray[0] + ' (' + txtArray[1] + ')');
}
});
あなたのajax成功方法で:
success: function(data)
{
$(data).find("p").each(function(index,element){
var pipe = element.innerHTML.indexOf("|");
if( pipe != -1 ){
element.innerHTML.replace("|","( ");
element.innerHTML += ")";
}
}
//continue with placing data on the page.
}
これを関数にファームアウトして、ページが最初にロードされたときに呼び出すこともできます
function replacePipe(element)
{
$(element).find("p").each(function(index,el){
var pipe = el.innerHTML.indexOf("|");
if( pipe != -1 ){
el.innerHTML.replace("|","( ");
el.innerHTML += ")";
}
}
}
これにより、ajax の成功は次のようになります。
success: function(data)
{
replacePipe(data);
//place data, perhaps $(tar).html(data);
}
そして、あなたもこれをオンロードすることができます
window.onload = function(){
replacePipe(document.body);
};
段落タグにクラス名を追加すると、次のように使用することもできます...
html部分 -
<p class="item">6565655655|cell</p>
jQuery部分
$(document).ready(function() {
var aText = ($('.item').html()).split('|');
$('.item').html(aText[0] + " (" + aText[1] + ")");
});