My goal is to change text in span .name into element with link-
<div class="input-wrap">
<span class="name">favorite 1</span>
</div>
How can I use JS to add link to this element so as it looks like that:
<div class="input-wrap">
<span class="name">favourite 1</span>
</div>
.wrapInner() wraps element around passed value.
Try this:
$(".name").wrapInner("<a href='/specyficwebsite.html'></a>");
Fiddle here.
You could:
$('span.name').html(function () {
return $('<a>').attr('href', '/specyficwebsite.html').text($(this).text());
});
See demo jsFiddle here.
Generated HTML:
<span class="name">favourite 1</span>
You can do this way:
$(".name").html(function(){
$(this).wrap("<a href='/specyficwebsite.html'></a>")
})
Demo Fiddle
try something like this
$(function(){
var link = ''+$('.name').text()+'';
$('.name').html(link);
})
Try with .wrapInner() like
$(".name").wrapInner( '' );
See this FIDDLE You can also try like
var txt = $('.name').text();
$('.name').html('' + txt + '');
Or directly
$('.name').html('' + $('.name').text() + '');
Try this FIDDLE
Heres the FIDDLE
var $name = $(".name");
var txt = $name.text();
$name.html('' + txt + '');
Related
This is not ideal, but I am running out of options on trying to wrap some HTML around a heading that I have. It is possible at all to target a header text and wrap HTML around that text?
Starting text:
<div class="header-intro-text">
<h1>New Business Conference</h1>
</div>
Ending Text with added HTML
<div class="header-intro-text">
<h1>New Business Conference</h1>
</div>
Try:
$(".header-intro-text h1").wrapInner('');
You should be able to do the following with jQuery:
$('h1').html('' + $('h1').text() + '');
or for multiple headers
$('h1').each(function() {
$(this).html('' + $(this).text() + '');
});
var hit = $('.header-intro-text h1');
var hitText = hit.text();
hit.html($('').text(hitText));
Demo: http://jsfiddle.net/qwertynl/reV9V/
var word = 'Conference';
function highlight(word){
var $container = $('.header-intro-text');
$container.html(
$container.html().replace(word, ''+word+'')
);
}
I've the elements as follows,
<div id="pager">
First
Previous
<a class="" href="/somepath/1">1</a>
<a class="Current" href="/somepath/2">2</a>
<a class="" href="/somepath/3">3</a>
Next
Last
</div>
and I want it to be changed as follows within browser.
<div id="pager">
First
Previous
<a class="" href="/somepath/1?a=text">1</a>
<a class="Current" href="/somepath/2?a=text">2</a>
<a class="" href="/somepath/3?a=text">3</a>
Next
Last
</div>
So that I can use the "a" data values to next page.
Can any one give me the code, which does the appends inside
div id="pager" -> <a> -> href="
and i wants to remove the added text with another onChange event.
Thanks in advance
Since jquery is tagged :
$('#pager a').each(function(){
this.href += '?a=text';
})
Vanilla JS would look like this :
var a = document.getElementById('pager').getElementsByTagName('a'),
length = a.length;
for(var i=0; i< length; i++){
a[i].href += '?a=text';
}
.attr(), like many jQuery functions, can take a function argument that modifies the existing value:
$('#pager a').attr('href',function(i,str) {
return str + '?a=text';
});
$('#pager a').each(function() {
$(this).attr('href', $(this).attr('href') + '?a=text');
});
Simply use the attr property. Example :-
$("a").attr("href", "http://www.google.com/")
This will do the job.
$("#pager").find("a").each(function(){
var $this=$(this);
$this.attr("href",$this.attr("href")+"?a=text");
})
you can use attr method
$('a').attr('href', '/somepath/1?a=text');
And if you want to change the href of a specific <a> give that '' a unique id and than change its href as follows
$('#link').attr('href', '/somepath/1?a=text');
Try this code :
$('#pager a').each(function(){
this.href += '?a=text'
})
I am very confused on how to get this work, did a lot of research online to help find a solution to this, but got nothing. Found this link here: http://viralpatel.net/blogs/jquery-get-text-element-without-child-element/ but still didnt help much
This is what I am trying to accomplish, the system is outputting text like this, I have no control over the html.
<div class="myclass">
Text 1
Text 2
Text 3
</div>`
but would like to use jquery to insert html around those text
For example:
<div class="myclass">
<span>Text 1 </span>
<span> Text 2 </span>
<span> Text 3</span>
</div>
any help is appreciated
thank you very much
$('.myclass').html(function(i, v){
return '<span>' + $.trim(v).split('\n').join('</span><span>') + '</span>';
});
http://jsfiddle.net/vDp6A/
There are other ways. This would satisfy the question.
$(function(){
stuff=$('.myclass').text().split("\n");
newhtml='';
$.each(stuff, function(i,o){
if (o!=''){
newhtml +='<span>' + o + '</span>'."\n";
}
});
$('.myclass').html(newhtml);
});
This should sort it:
var theDivs = document.getElementsByClassName('myclass');
for(var i in theDivs)
{
if(parseInt(i)==i)
{
var div = theDivs[i];
var text = div.innerHTML.split("\n");
for(var k in text)
{
var trimmed = text[k].replace(/^\s+|\s+$/,'');
if(trimmed != '') text[k] = '<span>'+trimmed+'</span>';
else text[k] = trimmed;
}
div.innerHTML = text.join("\n");
}
}
I have the following structure below. Using jQuery I need to take each link and display the href below it. I can use some child selectors to write code for each but I simply want to write something that does it for all div's with the 'col' class, and will allow for future additions...
<div class="col">
Google
</div>
<div class="col">
Yahoo!
</div>
<div class="col">
Facebook
</div>
<div class="col">
Twitter
</div>
The above should turn into...
<div class="col">
Google
<span>http://google.com</span>
</div>
<div class="col">
Yahoo!
<span>http://yahoo.com</span>
</div>
<div class="col">
Facebook
<span>http://facebook.com</span>
</div>
<div class="col">
Twitter
<span>http://twitter.com</span>
</div>
Any help is appreciated!
This smacks of you not having tried to write the code at all. You should really be able to do this on your own.
$('.col a').each(function() {
var $this = $(this);
$("<span>"+$this.attr('href')+"</span>").insertAfter($this);
});
$('div.col').each(function(){
alert($(this).find("a").attr("href"));
//figure out the rest yourself
});
$('.col > a').after(function() {
return $('<span>', {text:this.href});
});
this should do it. you can use each. read more about selectors.
$(document).ready(function(){
$("div.col").each(function(){
var hreftext = $(this).find("a").attr("href");
$(this).append("<span>" + hreftext + "</span>");
});
});
Something like this would work:
$('div.col').each(function() {
var $a = $(this).find('a:first'),
href = $a.attr('href');
$('<span>').text(href).insertAfter($a);
});
$(".col").each(function(){
var v= $(this).find("a");
$("<span/>",{text:v.attr('href')}).insertAfter(v);
});
DEMO
This can be done with a basic jQuery 'append()'
JsFiddle Example
$('div.col').each(function(){
var href = $(this).children('a:first').attr('href');
$(this).append('<span>' + href + '</span>');
});
yes I agree with each solution. But it would be better if you cache your selector.Otherwise each time jQuery has to dive into DOM. If its a big list may affect performance.
var col = $('.col a');
col.each(function(){
var val = $(this).text();
$(this).append("<span>"+val);
})
http://jsfiddle.net/cXkqc/2/
Update
There was a mistake from my part to interpreting the question. Updated code & link.
var col = $('.col a');
col.each(function(){
var val = $(this).attr('href');
$(this).after("<span>"+val);
})
http://jsfiddle.net/cXkqc/3/
thanks #am not i am
I'm trying to add the content of each span along with the value in the title attribute.
<div id="group-wrap" class="group">
<span class="lbracket" title="&f">(</span>
<span class="grouptitle" title="&f"> Group </span>
<span class="rbracket" title="&f">) </span>
<span class="username" title="&f"> Username </span>
<span class="col" title="&f">:</span>
<span class="text" title="&f"> Helo There! </span>
</div>
Here is what I have so far:
var str = [];
$('#group-wrap span').each(function(){
str.push($(this).attr('title'));
});
alert(str.join(''));
});
http://jsfiddle.net/B9QeK/3/
The output is &f&f&f&f&f (the value of each title attribute), but the expected output has the value, plus the content that is in the span. The value of the attribute should be appended before the content.
&f(&fGroup&f)&fUsername: &f text
How can I get this result?
Looks like you are looking for
str.push( this.getAttribute('title'), this.textContent || this.text );
As for performance reasons, you should not re-create a jQuery object for every single iteration. Even better, don't use jQuery at all to receive those values.
JSFiddle
And by the way, you can make usage of jQuerys .map() to do it a bit more elegant:
jQuery(function($){
var str = $('#group-wrap span').map(function(){
return this.getAttribute('title') + this.textContent || this.text;
}).get();
alert(str.join(''));
});
JSFiddle
Reference: .map()
jQuery(function($){
var str = [];
$('#group-wrap span').each(function(){
str.push($(this).attr('title') + $(this).text());
});
alert(str.join(''));
});
Working JSFiddle
text:
Description: Get the combined text contents of each element in the set of matched elements, including their descendants.
docs
Just use the text method to get the text content of each span:
var str = [];
$('#group-wrap span').each(function(){
//Push value of title attribute and text content into array:
str.push($(this).attr('title') + $(this).text());
});
alert(str.join(''));
});
Your line
str.push($(this).attr('title'));
Should look like:
str.push($(this).attr('title') + $(this).text());
Although, this is making two identical calls $(this), so you might consider caching:
var $this = $(this)
str.push($this.attr('title') + $this.text());
var str = "";
$('#group-wrap span').each(function(){
str+=$(this).attr('title')+$(this).text();
});
alert(str);
});