I am using the following code on my webpage, in order to format certain numbers (with the ".pricetag" class), as i need to show them as currencies (comma separated at thousands) on my front end:
jQuery(document).ready(function($) {
$.fn.digits = function(text){
$(this).text(text.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,") + '€' );
};
var tempText = $.trim($(".pricetag").text());
tempText = tempText.substr(0, parseInt(tempText.length) );
$(".pricetag").digits(tempText);
});
So far so good - code works fine, and does what i need it to.
My problem is that i have more classes than just the ".pricetag" class, for which i want to use the function. So right now i have copy pasted the code, and just changed the target class (".pricetag_2" etc.).
How do i tell one version of the javascript/code, to affect several classes (both ".pricetag" and ".pricetag_2") in stead of having to copy paste the same piece of code, let's say 10 times, to target 10 different classes.
It's a bit overkill to have so much code, as the function is exactly the same every time. In CSS it's pretty easy, as you can affect several classes at once, by comma seperating them within a piece of code, but how do i do it in javascript?
Thanks!
If all your classes begin with .pricetag you might try the attribute-starts-with selector.
$("[class^='pricetag']").digits(tempText);
Related
After months of web-development, I find myself completely helpless trying to find a good solution for a simple problem of formatting all the numbers throughout the DOM as I wish. Specifically, I have a js function my_int_formatter(), that I want to apply to all integers after the doc has been loaded. Best descriped by example - I want to do something like
<td>my_int_formatter({{django_variable}})</td>
I know the code above won't work, because I have to include 'script' tag, but first, I don't like the messy code, and second, javascript won't recognize python variable
I tried the following way:
HTML
<td class = 'my_integer'>{{django_variable}}</td>
JS
$(document).ready(function(){
// ....
content = $('.my_integer').html();
$('.my_integer').html(my_int_formatter(content));
...but as expected, I got wrong results because the js code applied the same html() content of the first .my_integer element in the DOM chain to all the others. Any ideas how to do this the short and correct way ?
If I understand correctly, your problem isn't with the formatting but actualy applying the formatting to each of your dom elements.
Try using jquerys .each() function and using $(this).html() to actualy grab the content.
$('.my_integer').each(function(){
content = $(this).html();
$(this).html(content+"formatted");
});
here's a quick fiddle :
https://jsfiddle.net/57rdq2a0/2/
If I understand you correctly, you want to use builtin django.contrib.humanize application: https://docs.djangoproject.com/en/1.9/ref/contrib/humanize/
You can format integers using some predefined filters, for example intcomma:
4500 becomes 4,500.
45000 becomes 45,000.
450000 becomes 450,000.
4500000 becomes 4,500,000.
Usage in your case would be like
{% load humanize %}
<td>{{django_variable|intcomma}}</td>
Also don't forget to include the app in INSTALLED_APPS
Also this question might be useful
If you want to apply filter to all variables of some kind, I suggest you to use Middleware to fiddle with response before rendering.
I was recently assigned a very small but complex task in jQuery, the requirement was quite simple, given the following HTML :
<div>
<span id="myid2151511" class="myclass23462362">....foobar....</span>
<span id="myid2151512" class="myclass23462362">....YoLO....</span>
<span id="myid2151513" class="myclass23462362">....lalal....</span>
<span id="myid2151514" class="myclass23462362">....foobar....</span>
</div>
What i have to do i recursively go through all the span under div, With a certain id and check if the values contained in the spans is foobar, So i can up with the following jQuery code:
$(function(){
$('div [id^="myid"]:contains("foobar"):last').css({'background' : 'rgb(227, 216, 22)' })
});
FIDDLE HERE
Its quite a complex bit of code by itself, but the jQuery documentation made it a cakewalk for me as for as understanding the code is concerned.
By now i am comfortable writing code like so in jQuery:
$('some-Element').somemethod().anothermethod().yetanothermethod();
Every function returns a value in the above jQuery statement, so chain ability becomes a reality.
but when i see code like so.
$('div [id^="myid"]:contains("foobar"):last').css({'background' : 'rgb(227, 216, 22)' });
I am thrown a bit off the hook(although i managed to write the above line myself), notice how alot of the filtering is done by a selector :last and :contains, to me they appear to be working much like some kind of a jQuery method. So my question is, how do these selectors in jQuery work in comparison to jQuery methods ?
If anybody could explain or give me a vague idea, it would be Fantastic.
EDIT ::
well to clarify my question in one line, to me $(".someClass").eq('10'); makes sense, but somehow $(".someClass:eq(10)") does't , i mean it works, but how on earth is it implemented internally ?(I wrote this edit after reading the answers below, and well this question has been thoroughly answered by now, but this edit is just to clarify my question.).
That's an interesting question. The short answer is they both accomplish the same thing. Of course though, there's always more to the story. In general:
$('div [id^="myid"]:contains("foobar"):last').css({'background' : 'rgb(227, 216, 22)' });
Is equivalent to:
$("div").find("[id^='myid']").filter(":contains('foobar')").last().css({'background' : 'rgb(227, 216, 22)' });
Most of the time when you call $(), jQuery is calling document.querySelectorAll(). This is a browser implemented function that grabs elements based on a selector. That complex string you create is passed to this method and the elements are returned.
Naturally, things implemented by the browser are faster than JavaScript so the less JavaScript and more C++, the better. As a result, your example passing everything as a selector is likely to be faster as it just sends it all to the browser as one call and tells it "do it." Calling $(), contains(), last() on the other hand is going to call querySelectorAll multiple times and therefore it will likely be slower since we're doing more JavaScript as opposed to letting the browser do the heavy lifting in one shot. There are exceptions though. JQuery generally calls querySelectorAll. However, there are times when it doesn't. This is because jQuery extends what querySelectorAll is capable of.
For example, if you do something like $(".someClass:eq(10)") per the jQuery documentation:
jQuery has extended the CSS3 selectors with the following selectors. Because these selectors are jQuery extension and not part of the CSS specification, queries using them cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. To achieve the best performance when using these selectors, first select some elements using a pure CSS selector, then use .filter().
So in that case, while $(".someClass:eq(10)") might seem to be faster, in reality $(".someClass").eq(10) or $(".someClass").filter(":eq(10)") is going to be faster since the first call will be executed as JavaScript code. The latter two will first call querySelectorAll to select by class, then only use JavaScript to find the 10th element. When jQuery has to do the selection in pure JavaScript, it does it using the Sizzle engine which is fast, very fast, but not faster than native code in the browser. So again, the short answer is, they're the same thing, the long answer is, it depends. If you're interested in all the extensions that fall into that category, the link to the jQuery documentation I included lists them.
First of all, yes nikhil was right. ID is unique identifier and can be only used once. If you are willing to apply same styles to several elements, or you to use it to select several elements together use class attribute. But however, i couldn't understand your question. But maybe this could help
there is function in javascript which is widely supported by almost all major browsers
document.querySelectorAll("div [id^=myId]");
in fact you could write your own library (well not as advanced one like jquery but)
var $ = function(selector){
return document.querySelectorAll(selector);
}
// and then you could use it like this
var elementsWithMyId = $("div [id^=myId]");
// where elementsWithMyId will contain array of all divs which's id start with myId
so as i understood your question, No. there is no magic happening behind jQuery selections it's just browser built in function which is kinda shortened by jquery. of course they added tons of new features, which would work like this:
var $ = function(selector){
var elementsArray = document.querySelectorAll(selector);
elementsArray.makeBlue = function(){
for(var i = 0; i < elementsArray.length; i++){
elementsArray[i].style.backgroundColor = "blue";
}
// so elementsArray will now have function to make all of its
// div blues. but if you want to have chain like that, we have to return this array not just make all of it blue
return elementsArray;
}
elementsArray.makeRed = function(){
for(var i = 0; i < elementsArray.length; i++){
elementsArray[i].style.backgroundColor = "red";
}
return elementsArray;
}
return elementsArray;
}
// so now you can use it like this
// this returns array which has options make blue, and make red so lets use make blue first
// makeBlue then returns itself, meaning it returns array which has again options of making itself red and blue so we can use makeRed now
$("div [id^=myId]").makeBlue().makeRed();
and thats it!
I was just wondering which is the correct or most efficient way of navigating through the Dom using variables.
For example, can I concatenate selectors
var $container = '.my-container';
$($container).addClass('hidden');
$($container + ' .button').on('click', function(){
//something here
});
or should I use the jQuery traversal functions
var $container = $('.my-container');
$container.addClass('hidden');
$container.children('.button').on('click', function(){
//something here
});
Is there a different approach, is one best, or can you use them at different times?
The $ is usually used only when working with an actual jquery object. You generally shouldn't prefix anything with that unless it's really something from jquery.
Beyond that little bit though, performance-wise, your second bit of code is going to be faster. I made an example jsperf here: http://jsperf.com/test-jquery-select
The reason the second bit of code is faster is because (if I remember correctly) jquery caches the selection, and then any actions performed on that selection are scoped. When you use .find (which is really what you meant in your code, not .children), instead of trying to find elements through the entire document, it only tries to find them within the scope of whatever my-container is.
The time when you wouldn't want to use the second pattern is when you expect the dom to change frequently. Using a previous selection of items, while efficient, is potentially a problem if more buttons are added or removed. Granted, this isn't a problem if you're simply chaining up a few actions on an item, then discarding the selection anyway.
Besides all of that, who really wants to continuously type $(...). It's awkward.
Recently I have been working with css3 and its animations. I use the following code at one point:
$(".container").css('-webkit-transform', 'translate(200px,200px)');
Now most of you are wondering why I dont just use a class to do above and toggle it.
Well the thing is I do some calculations and then obtain the 200px,200px , so I will replace the 200px,200px with a variable (I used 200px,200px as example)
Any ideas on what I can do
If I'm understanding your question, you want to use variables for the translation outlined in the above code. If you have variables like:
var x = 200, y = 200;
You should be able to insert them into the translation string by cutting it up and catenating them together. It might look like:
$(".container").css('-webkit-transform', 'translate('+x+'px,'+y+'px)');
I have a javascript function that changes a user preference, if they want weights to be metric or in imperial.
On my page I print out the weight, IE:
This is some description:
This product weights <b>200 KG</b>
Blah blah
I need to make it so that Javascript changes the weight measurement for all weights on the page, and am not sure the best way to tackle this. Can you create your own tags, or tag properties?
Thanks for any suggestions, JQuery is fine.
I'd recommend using strong rather than b, but the below will work for either of them.
Edit: Better solution than using a class, with working example, below.
Tag the weights with a class, e.g.:
This product weighs <strong class='weight'>200 KG</strong>
Then in your JavaScript, you can switch like so:
$('.weight').each(function() {
var $this = $(this);
var original = $this.text();
var converted = /* ...convert the weight here... */;
$this.text(converted);
});
Obviously you can condense that a bit, kept it verbose for clarity.
Better solution:
Tag the elements with the original weight (the one you store in your database) as a data-weight attribute, e.g.:
This product weighs <strong data-weight='200'>200 KG</strong>
Then convert from that value:
$('[data-weight]').each(function() {
var $this = $(this);
var value = $this.attr("data-weight");
if (usingMetric) {
$this.text(value + " KG");
}
else {
value = parseFloat(value) * 2.20462262; // Convert to imperial
$this.text(value.toFixed(2) + " lbs");
}
});
Working example: http://jsbin.com/icure3
Attributes in the form data-xyz will pass validation as of HTML5; prior to HTML5 they are technically invalid, but harmless. But if you prefer a version that doesn't use data-weight, you can do it with classes instead: http://jsbin.com/icure3/2 (inspired by Reigel's answer to Tom's other question).
If you see a delay when switching between metric and imperial on slower browsers (I'm looking at you, Microsoft), you can help jQuery's selector engine optimize by giving it more context than just "[data-weight]". jQuery's engine supports nearly all of CSS3. For instance, if you always use the data-weight attribute only one one kind of tag (say, strong tags), change the selector to "strong[data-weight]" so the selector engine knows it can optimize for just one specific tag name. Similarly, if all of these are inside some container (e.g., a div with the ID "productList" for instance), you can help the engine out even more ("#productList strong[data-weight]") so it can ignore anything outside that div. I've kept it completely general above. But probably only bother if the page is big and complex enough that you see a performance issue.
Final thought: To throw a bone to browsers with JavaScript disabled, you might include both values in a title attribute as well, e.g.:
This product weighs <strong title='200 KG / 441 lbs' data-weight='200'>200 KG</strong>
...so it shows up as a tooltip on browsers that do that. I included that in the example above.
I would add a class .weight and use this to target all the weights..
$('.weight').each(function(){...})
If you want to change the innerHTML you can use the html() method directly
$('.weight').html(function(idx, oldhtml){
// you can use the oldhtml to extract info and create the new text here..
$(this).html( ../*you new html here*/.. ); // replace existing with new html ..
})
HTML:
<b class="weight">200 KG</b>
Javascript:
$("#UnitChangeButton").click(function() {
$('.weight').each(function(){
txt = $(this).text();
newTxt = convert(txt);
$(this).text(newTxt);
});
});
You need to implement the convert function. You can store the state (metric or imperial) in a javascript variable.