I made a custom attribute to add a title to each links.
And here is the jQuery code
$('#ex1,#ex2').append('<span class="title">'+$(this).attr("nameOf")+'</span>');
But the link displays as undefined. How can I fix this.
Iterate over the element tags & append to it
$('a').each(function(i, v) {
$(this).append('<span class="title">' + $(this).attr("nameOf") + '</span>');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
the this in your example is window, it does not know that it is supposed to be a reference to a link. In order to use this, you would need to use a function inside of append() and return the string.
$('#ex1,#ex2').append( function() { return '<span class="title">'+$(this).attr("nameOf")+'</span>'});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
And if you do not want to use JavaScript at all and have the text show up in the link, there is always a CSS Solution.
a[nameOf]::before {
content: attr(nameOf)
}
You can achieve the same as below using loop:
$('[nameOf]').each(function(){
$(this).append('<span class="title">' + $(this).attr("nameOf") + '</span>')
});
but as per w3c rules you can not use nameOf attribute in a tag, So you can use use data-nameof instead.
in HTML you can't create a custom attribute in camel case. if you want to add more words to your custom attr, you need to add a - symbol. so, for your case, do.
later, for a search, I suggest you use the camel case.
$(element).attr('nameOf');
Related
I want to update the content of a span like so:
$('#myElement').text('£' + parseFloat(myPrice));
But the HTML does not render the £ correctly when updated. There are other instances where I want to use a different symbol as well.
Is there a way around this?
You need to use the html() method as text() encodes the value. Try this:
$('#myElement').html('£' + parseFloat(myPrice));
$(function(){
var myPrice = "403";
$('#price').html('£' + parseFloat(myPrice));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<p id="price"></p>
I am having a problem I want to attach the registered trademark symbol a button and I want it to be done with jquery because there are lots and lots of buttons that require the sign when I used it with html for example(below) it worked.
<input type="button" class="button_a" value="Value ®" />
But when I used jquery as below it returns as plain text:
$('.button_a').each(function(){
$(this).attr("value",$(this).attr("value")+" ®");
});
I don't want to waste my time and space by putting ® in all the button's values so I want it to be done in jquery but what am I doing incorrect.
I know it's a sluggish question but please someone help out me in this question
Javascript may be also used.
For more info please comment and ask
Thanks....
® is being rendered as a text string, but you can use unicode \u00AE
$('.button_a').each(function(){
this.value = this.value +" \u00AE";
});
http://jsfiddle.net/fbuohvm1/
or just ®:
$('.button_a').each(function(){
this.value = this.value +" ®";
});
http://jsfiddle.net/fbuohvm1/1/
Because, while the DOM you are manipulating was initialised from an HTML document, you are now dealing with DOM and not HTML. You are writing the value as text not as HTML.
You need to use either a literal character ("®") or a JavaScript escape sequence ("\u00AE").
You have to encode it first before setting the value of textbox.
$('.button_a').each(function () {
$(this).val("value " + $("<div/>").html('®').text());
});
$("<div/>").html('®').text() will return the encoded value.
Demo: https://jsfiddle.net/tusharj/t2gwptys/
you need to process content by html(), because html entities is manipulate by html() function, try this code.
$('.button_a').each(function(){
$(this).val($("<p/>").html($(this).val()+" ®").html());
});
Use a hidden div.
$('.button_a').each(function(){
var decoded = $('<div/>').html('®').text();
$(this).val($(this).val() + ' ' + decoded);
});
See Sample
In your case plain js is more straightforward:
$('.button_a').each(function(){
this.value += " ®";
});
-- EDIT --
Unfortunately this is still escaped, in fact you need
this.value += " \u00AE";
$('.email').each(function(l,i){
var that = $(this);
var thatOtherOne = $(this:after);
$('<a>').attr('href', 'mailto: '+ that.html + thatOtherOne.css('content')).insertAfter(that);
that.hide();
});
.email:after {
content: "#mydomain.com";
}
<span class="email">info</span>
Hello again Stackoverflow!
This is my method against spam. Using CSS the :after selector and content I try fill my custom email in inside the <span> and the css adds the url. This doesn't make it clickable though, so that's why I try the above method using JS/jQuery.
This sadly doesn't work because $(this:after); is not a valid selector. How can I change this?
You simply cannot construct a selector like that; it really doesn't make syntactic sense. Selectors are for searching through the DOM. To do what you're trying to do, you can try using the attr() trick in your "content":
.email:after {
content: attr(data-domain);
}
Then in your markup:
<a class=email data-domain='#whatever.com'>info</a>
And your JavaScript can then do this:
$('.email').each(function(l,i){
var that = $(this);
var domain = that.data('domain');
$('<a>').prop('href', 'mailto: ' + that.text() + domain).insertAfter(that);
that.hide();
});
The idea is to keep stuff that your code actually needs to use in a separate attribute, and then use the attr() operator (or whatever you want to call it) in the CSS rule to get that attribute value and use it as content. The operator can be combined with strings if you like. Chris Coyier has a good blog post about it.
I thought this one would be easy, but after an hour of googling, i still haven't found anything.
I know how to update content in a div with jquery:
$(".div").html("stuff");
but that replaces the current content in the DIV (over writes it). I need the current content to remain there.
I don't mind if you know a way in Javascript or Jquery.
Thanks
You can either use append(), prepend() or html()'s inbuilt function:
$('div').html(
function(index,oldhtml){
var newString = 'something';
$(this).html(newString + ' ' + oldhtml);
});
JS Fiddle demo.
References:
append().
html().
prepend().
I think you're looking for .append()
Concat?
var old_content = $(".div").html();
$(".div").html(old_content + "newstuff");
I have some HTML that is stored as an attribute on a tag. I can access it in jQuery using
$("input[id$='_myField_hiddenSpanData']").attr("value")
This looks like this:
"<span id='spantest\user' tabindex='-1' contentEditable='false' class='ms-entity-resolved' title='test\user'><div style='display:none;' id='divEntityData' key='test\user' displaytext='Test User' isresolved='True' description='test\user'><div data=''></div></div><span id='content' tabindex='-1' contenteditable onMouseDown='onMouseDownRw();' onContextMenu='onContextMenuSpnRw();' >Test User</span></span>"
I would need the value of the key attribute (test\user). Can I somehow tell jQuery to parse a block of HTML and apply selectors to it? I found I can wrap it into a new jQuery object by wrapping it into another $(): $($("input[id$='_myField_hiddenSpanData']").attr("value")) but I still did not manage to apply a selector on it.
Any hints? And no, sadly I do not control the markup that generates the hidden field.
Wrap your crappy markup with a jQuery object, and then use the find function to apply a selector to it...
var crappyHtml = $("input[id$='_myField_hiddenSpanData']").attr("value");
var key = $(crappyHtml).find("div[key]").attr("key");
alert(key);
Try this:
var html = $("input[id$='_myField_hiddenSpanData']").attr("value");
var user = $(html).find("#divEntityData").attr("key");
alert("user=" + user);
You should be able to pass it as a context. Does this work?:
$('#divEntityData', $($("input[id$='_myField_hiddenSpanData']").attr("value"))).attr('key');