I'm trying to split the div's text and add class to the second string. But no luck :(
Here's the code:
<div class="graphTooltipText">925 11:45pm</div>
This is not working:
var str = $( ".graphTooltipText" ).html();
var splitter = str.split(' ')[1];
$(splitter).wrap('<div class="time" />');
Any help is appreciated.
You need to wrap it and then update the original element, so try
$('.graphTooltipText').html(function (i, html) {
return html.replace(/\s(.*$)/, ' <div class="time">$1</div>')
});
Demo: Fiddle
http://jsfiddle.net/kJm8Q/1/
This simply wraps the item, and spits out the 2nd array element:
$(".graphTooltipText").wrap(function() {
$(this).html("<div class='time'>" + $( this ).text().split(" ")[1] + "</div>");
});
Try This:
var str = $(".graphTooltipText").html(function (_, html) {
return html.replace(html.split(' ')[1], '<div class="time" >' + html.split(' ')[1] + '</div>');
});
you can use it too:
var str = $(".graphTooltipText").text();
var splitter = str.split(' ');
var timeDiv = $('<div/>', {
'class': 'time',
text: splitter[1] // put the time here
});
$(".graphTooltipText").html(splitter[0]).append(timeDiv); // update the div content
Fiddle
Related
I am pulling some text from a database and I have , and I would like to replace them with <br> don't really know why it's not working any ideas?
JS Code
$( document ).ready(function() {
//.MoreInfoText
var $infotext = $('.MoreInfoText').text().replace(/\+/g, '<br>');
$.each($infotext, function() {
$('.MoreInfoText').text($infotext);
});
});
Text as its coming from the DB:
Ryan open 30/01/1998, ryan added numberOFIteams of NameOFIteams
1st use replace(/\,/g, '<br>')); yours only replace +
(note the g means replace all, you can also make the search case-insensitive pass the "i" parameter ex: /gi)
2nd use $('.MoreInfoText').html() so your <br> are treated as HTML instead of string.
$( document ).ready(function() {
//.MoreInfoText
$('.MoreInfoText').html($('.MoreInfoText').text().replace(/\,/g, '<br>'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="MoreInfoText">11111,22222,33333,44444,55555</span>
It should be .replace(/,/g,"<br>") so all ,s get replaced with <br>. Right now it's replacing + with <br>.
Also to iterate over every element with class MoreInfoText replacing , with <br> modify your code like this:
$('.MoreInfoText').each(function() {
var text = $(this).text().replace(/,/g, '<br>')
$(this).html(text);
});
Try to use the following code:
$( document ).ready(function() {
//.MoreInfoText
var $infotext = $('.MoreInfoText').text().replace(',', ' ');
$.each($infotext, function() {
$('.MoreInfoText').text($infotext);
});
});
I would recommend avoiding the usage of <br /> for adding line breaks, you may consider using <p> instead.
$( document ).ready(function() {
//.MoreInfoText
$('.MoreInfoText').each(function() {
var moreArray = $(this).text().split(',');
var $infotext = '';
for(var i = 0; i < moreArray.length; i++){
$infotext += '<p>' + moreArray[i] + '</p>';
}
$(this).empty().html($infotext);
});
});
If paragraphs are not already placed each on a new line, you can add a CSS rule for that. This helps separating the content from the presentation, which is what CSS is for.
I have a simple menu
<div class="nav-container desktop">
One
Twp
</div>
I am looping through this with jQuery each and then creating <li> tags with the complete <a.../a>.
$.each( $('.nav-container>a'), function(i, item){
var menupunkt = '<li>' + item + '</li>'
console.log(i, menupunkt);
});
Examples: http://codepen.io/anon/pen/bwbgap, https://jsfiddle.net/86g44ssp/
In my console I see only the following
<li>http://xyz.ccom/_index.php?page=_sub_papa&main=tw</li>"
Why don't I get the whole a? Because when I just print "item" I get the whole <a.../a>
item or this represent a DOM element. You're casting it to string when you treat it as as string. You can use item.outerHTML - the string you're looking for - in place of item.
$.each( $('.nav-container>a'), function(i, item){
var menupunkt = '<li>' + item.outerHTML + '</li>'
console.log(i, menupunkt);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-container desktop">
One
Twp
</div>
NOTE
Not sure if there's an advantage to it but I would prefer:
$('.nav-container>a').each(function(i, item){
var menupunkt = '<li>' + item.outerHTML + '</li>'
console.log(i, menupunkt);
});
I have updated your fiddle, you just need to change
var menupunkt = '<li>' + item + '</li>'
to
var menupunkt = '<li>' + item.outerHTML + '</li>'
And there is no need to add extra wrapping or stuff, just get the HTML from outerHTML and you're done !
$.each( $('.nav-container>a'), function(i, item){
var menupunkt = '<li>' + $(item).text() + '</li>'
console.log(i, menupunkt);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-container desktop">
One
Twp
</div>
I believe you want to access the outerHTML. I've included code from another SO answer:
jQuery, get html of a whole element
https://jsfiddle.net/86g44ssp/1/
The change I've made is here:
jQuery.fn.outerHTML = function() {
return jQuery('<div />').append(this.eq(0).clone()).html();
};
... other code here ...
var menupunkt = '<li>' + $(item).outerHTML() + '</li>'
This is caused by type conversion. When you do '<li>' + item + '</li>' the JavaScript runtime will try to convert item to a string. This is done "under the hood" by calling toString() method on the item, e.g. item.toString(). You can do forced type conversion by doing it explicit:
console.log(i, item.toString());
$( ".nav-container a" ).wrap( "<li></li>" );
This is the fastest way to wrap .nav-container a inside list element.
While looping $.each('.nav-container a', function(i,v) {}); each <a> are like object NOT at TEXT
if you want target specific elements use:
$.each('.nav-container a', function(i,v) {
var fullObject = $(this).html(),
link = $(this).attr('href'),
text = $(this).text();
});
for some reason the gi modifier is behaving as case sensitive. Not sure what's going on, but maybe someone knows why this is. it works fine when the cases are the same. This JSFiddle will demonstrate my problem. Code below. Thanks.
javaScript:
var search_value = $('#search').val();
var search_regexp = new RegExp(search_value, "gi");
$('.searchable').each(function(){
var newText =(this).html().replace(search_value, "<span class = 'highlight'>" + search_value + "</span>");
$(this).html(newText);
});
HTML:
<input id = "search" value = "Red">
<div class = "searchable">this should be red</div>
<div class = "searchable">this should be Red</div>
Correct Code is
var search_value = $('#search').val();
var search_regexp = new RegExp(search_value, "gi");
$('.searchable').each(function(){
// var newText =$(this).html().replace(search_value, "<span class = 'highlight'>" + search_value + "</span>");
var newText =$(this).html().replace(search_regexp, function(matchRes) {
return "<span class = 'highlight'>" + matchRes + "</span>";
});
$(this).html(newText);
});
output
Fiddle
Issues with your code:-
First: search_regexp - You haven't used search_regexp anywhere in your code
Your Code
var newText =$(this).html().replace(search_value, "<span class = 'highlight'>" + search_value + "</span>");
Second
You are using search_value to replace. It will make both Red and red to either Red or red after replace.
eg: if search_value is Red then your output will be
this should be Red
this should be Red
you should use matched result instead of search_value
Third: How to use RegExp with replace function?
Correct Method is
var newText =$(this).html().replace(search_regexp, function(matchRes) {
return "<span class = 'highlight'>" + matchRes + "</span>";
});
Explanation
replace(<RegEx>, handler)
Your code isn't using your regex in the replace call, it's just using the search_value. This JSBin shows your code working: http://jsbin.com/toquz/1/
Do you actually want to replace the matches with the value (changing lowercase instances to uppercase in this example)? Using $.html() will also get you any markup within that element, so keep that in mind as well (in case there's a chance of having markup in the .searchable elements along with text.
Might be easier to do:
function highlight(term) {
var search_regexp = new RegExp(term, "gi");
$('.searchable').each(function(){
if (search_regexp.test($(this).html())) {
var highlighted = $(this).html().replace(search_regexp, function(m) {
return '<span class="highlight">'+m+'</span>';
});
$(this).html(highlighted);
}
});
}
Your original code in the JSBin is the highlightReplace() function.
I am dynamically constructing table rows using jquery.
In the following chunk of code, how do I read someValue in method prepareDiv()?
$( document ).ready(function() {
var someValue = "DummyValue"
html += '<tr id="resRowId' + rowindex + '" class="RsrvnRowClass">' +
'<td><a href="#" onclick="prepareDiv('+ someValue +');"><img src="../images/downarrow.jpg"></td></tr>';
$('#resTable tr').first().after(html);
});
function prepareDiv(value){
alert("value" + value);
}
I am using IE. Upon calling ready(), I get error DummyValue is undefined.
The problem is that you're ending up with generated code that looks like this:
onclick="prepareDiv(DummyValue);"
The lack of quotes around DummyValue means that it's expected to be a variable, whereas you want it to be treated as a string literal, so you need to add the quotes yourself:
onclick="prepareDiv(\''+ someValue +'\');"
That should result in:
onclick="prepareDiv('DummyValue');"
Just do something like this...the dynamically added values should be appended to tbody
var table = $("table tbody");
table.find('tr').each(function (i) {
var $tds = $(this).find('td'),
firstVal= $tds.eq(0).text(),
secVal = $tds.eq(1).text(),
thirdVal = $tds.eq(2).text();
alert(firstVal);//etc..
});
You have fews syntax errors, try this:
$( document ).ready(function() {
var someValue = "DummyValue";
html += '<tr id="resRowId' + rowindex + '" class="RsrvnRowClass">' +
'<td>' + '<img src="../images/downarrow.jpg" /></td></tr>';
$('#resTable tr').first().after(html);
});
I want to make the following code:
<h2>TEXTz</h2>
<p>ARTICLE</p>
<h2>TEXTx</h2>
<p>ARTICLE</p>
Look like this:
<div class="highlight">
<h2>TEXTz</h2>
<p>ARTICLE</p>
</div>
<h2>TEXTx</h2>
<p>ARTICLE</p>
But I have to use: contains for find h2 text and add wrap before h2 and after p.
My failed code:
$.extend($.expr[':'],{containsExact: function(a,i,m){return $.trim(a.innerHTML.toLowerCase()) === m[3].toLowerCase();}});
var byItem = "TEXTz"
var ItemTitle = $("h2:containsExact(" + byItem +")").text();
var ItemDes = $("h2:containsExact(" + byItem +")").next("p").text();
$("h2:containsExact(" + byItem +")").html('<section class="highlightitem"><h2>' + ItemTitle + '</h2><p>' + ItemDes + '</p></div>');
http://jsfiddle.net/NDUzW/
The method .add() allows adding elements to a jquery object.
Then you can use .wrapAll() to wrape a set of elements in jQuery.
var $h2 = $("h2:containsExact(" + byItem +")");
if ($h2.length) {
$h2.add( $h2.next('p') )
.wrapAll( $('<div>').addClass('highlight') );
}
Working example on jsfiddle
Simply use the jQuery functions:
var byItem = "TEXTz"
$("h2")
.filter(
function() {
if ($(this).html() == byItem) {
return true;
}
return false;
}
)
.next("p")
.andSelf()
.wrapAll($("<section>")
.addClass("highlightitem")
);
Example