I have following code in my html
<p>6565655655|cell</p>
I want to remove this vertical line and wrap word "cell" into round bracket. So I want output like below
<p>6565655655 (cell)</p>
How I can do it using jquery when content of p tag loading dynamically by ajax call.
Split the content of the p-tag with the pipe as delimiter and re-insert the so created array, second element with surrounding bracket.
Here an example:
var splittedString = $("p").text().split("|");
$("p").html(splittedString[0] + " (" + splittedString[1] + ")");
jsFiddle: http://jsfiddle.net/r3c4J/
You could do it like this:
$('p').each(function () {
var $txt = $(this).text();
if ($txt.indexOf('|') > 0) {
var txtArray = $txt.split('|');
$(this).html(txtArray[0] + ' (' + txtArray[1] + ')');
}
});
Example: http://jsfiddle.net/fewds/E637y/1/
in your ajax success method:
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.
}
you could also farm this out into a function so you could call it when the page first loads too
function replacePipe(element)
{
$(element).find("p").each(function(index,el){
var pipe = el.innerHTML.indexOf("|");
if( pipe != -1 ){
el.innerHTML.replace("|","( ");
el.innerHTML += ")";
}
}
}
which would make the ajax success look like this:
success: function(data)
{
replacePipe(data);
//place data, perhaps $(tar).html(data);
}
and you could do this onload too
window.onload = function(){
replacePipe(document.body);
};
If you add a class name to the paragraph tag then you could also use the following...
html part -
<p class="item">6565655655|cell</p>
jQuery part
$(document).ready(function() {
var aText = ($('.item').html()).split('|');
$('.item').html(aText[0] + " (" + aText[1] + ")");
});
