Increasing a number by 1 using jquery? - javascript

$('.fav').live('click', function(e){
$(this).toggleClass('highlight');
//increase the number by 1
html:
<li class="fav light_gray_serif">5</li>
how can i use jquery to increase the number between the li everytime its clicked? thanks

var num = parseInt($.trim($(this).html()));
$(this).html(++num)

You want to take a look at .html() or .text(). Here is an example:
$(this).text(function(i, t) {
return Number(t) + 1;
});

HTML:
<span id="counter">0</span>
jQuery:
$('#counter').text(Number($('#counter').text())+1);
You can increase the counter when clicking an existing button like this:
$(document).on('click','#your-button', function(){
$('#counter').text(Number($('#counter').text())+1);
});

Just use a plugin.
(function($) {
$.extend($.fn, {
"addOne": function() {
var num = parseInt(this.text(), 10);
this.text(++num);
},
"subtractOne": function() {
var num = parseInt(this.text(), 10);
this.text(--num);
}
});
}(jQuery))
Then call
$(".fav").live("click", function(e) {
$(this).toggleClass("highlight").addOne();
});

Related

while loop over takes the each method

I am adding element to page using the static number according to the click of user. so the element has the serial number according to the user click.
when user click on any of the element and deletes, i need to re-arrange the serial number. i try using the each operator with while loop, but not working.
any one suggest me the right way pelase.
here is my try:
var num = this.clipsLength, clipNum=1;
while(this.clipsLength > 0){
$.each(this.collection.pages, function(index, page) {
$.each(page, function(n, cs) {
var title = $(cs).find('span.text');
title.html('Clipping' + clipNum); //always 0 or all clips are '0'
});
});
--this.clipsLength;
clipNum = num-this.clipsLength;
}
for the try here is the fiddle:
Live Demo
do you mean something like reset the number?
http://jsfiddle.net/Lgwow5pt/2/
$('#content').on('click', '.remove', function () {
$(this).parent().remove();
$('span').each(function(i, item){
item.lastChild.textContent = i+1;
});
Demo
Try this
var htmlT = '<span>x</span>';
i=1;
$('#content').on('click', '.remove', function () {
$(this).parent().remove();
i = 1;
$('#content span').each(function() {
$(this).html('<a class="remove" href="#">x</a>'+i);
i++;
});
})
$('.add').click(function () {
$('#content').append($(htmlT).append(i));
i++;
});
Here it works
I modified your fiddle.
http://jsfiddle.net/khaleel/Lgwow5pt/7/
$('#content').on('click', '.remove', function () {
$(this).parent().remove();
var l= $("#content").find('span').length;
$('#content').empty();
i=1;
for(var j=0;j<l;j++){
$('#content').append($(htmlT).append(i));
i++;
}
})
Hope you accept the solution
Well ..according to your fiddle i tried to resolve the issue. Hope this helps.
change the click event on .remove with the following:
$('#content').on('click', '.remove', function () {
j=i-2;
i=1;
$(this).parent().remove();
$("#content").html("");
for(k=0;k<j;k++)
$('.add').trigger('click');
})

Sum values using each()

I'm trying to return the sum of values ​​every time one of the select is changed. But the sum is always wrong:
$('select').change(function () {
a = 0;
$('select').each(function () {
a += parseInt($('option:selected').val(), 10);
});
$('h1 span').html(a);
});
http://jsfiddle.net/vAu3E/
$('select').change(function () {
var a = 0;
$('select').each(function () {
a += parseInt(this[this.selectedIndex].value, 10);
});
$('h1 span').html(a);
});
JSFiddle
Use this.value (faster than re-getting a jQuery object when you already have it) and declare a so it's not global (I also invoked the handler immediately so your result shows immediately):
$('select').change(function () {
var a = 0;
$('select').each(function () {
a += parseInt(this[this.selectedIndex].value, 10); //originally this.value
});
$('h1 span').html(a);
}).change();
http://jsfiddle.net/vAu3E/10/
See comments for potential issues with this.value in versions of IE
Using sum plugin , you will have :
$('select').change(function () {
$('h1 span').html($('option:selected').sum());
});
FIDDLE : http://jsfiddle.net/abdennour/vAu3E/18/
NOTE
You use val method since your element is option tag. But , If It is a sum of DIV content elements for example , You must use html method instead of val :
So , the sum plugin still useful :
$('div.operators').sum('html');
I suggest this:
$("select").on("change", function(){
var a = 0;
$("select").each(function(){
a += parseInt($(this).val());
});
$('h1 span').html(a);
});
fiddle
Obviously the result is correct, because you have to substitute "option:selected" with this:
a += parseInt($(this).val(), 10);
If you put "option:selected" the selector is the first selector, instead with $(this) you get the value of each select...
Hope that this comment help you...
Bye
There's an alternative to parseInt; prepending a + will convert a 'numeric` string into a number:
$('select').change(function () {
var a = 0;
$('select').each(function () {
a += +this.value;
});
$('h1 span').html(a);
});
WORKING JSFIDDLE DEMO

jQuery: get div instance number

I'm looking to get the instance number of a div, e.g. I have 4 instances of the .test div, and using .length just generates 4. But I want to put the instance number in each div, for example the 3rd instance of the .test div would have a 3 in it and so on.
jsFiddle demo: http://jsfiddle.net/neal_fletcher/YrtjF/
HTML:
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
jQuery:
$(document).ready(function () {
var n = $(".test").length;
$('.test').html(n);
});
If this is at all possible? Any suggestions would be greatly appreciated!
Use the version of html() that takes a function as the parameter
$('.test').html(function (i) {
return i + 1
});
Demo: Fiddle
$(document).ready(function () {
var n = 1;
$('.test').each(function() {
$(this).html(n);
n++;
});
});
You can use this
$(document).ready(function () {
$(".test").html(function(i,v){
return i+1;
});
});
DEMO
you can use each method here
$(document).ready(function () {
$(".test").each(function(i){
$(this).html(i +1);
});
});

limit checked checkboxes jquery ui easely

Just simply want to limit the number of checkboxes, but actualy my code desallow all checkbox when lengh > 3 , whats wrong..
http://jsfiddle.net/mbAwC/11/
$('.limit :checkbox').change(function () {
var $cs=$(this).closest('.limit').find(':checkbox:checked');
if ($cs.length > 3) {
this.checked=false;$('.limit :checkbox').removeAttr('checked').button( "refresh" );
}
});
regards
Jess
Just remove removeAttr('checked')
$(function() {
$(".limit").buttonset();
$('.limit :checkbox').change(function () {
var $cs=$(this).closest('.limit').find(':checkbox:checked');
if ($cs.length > 3) {
this.checked=false;
$('.limit :checkbox').button( "refresh" );
}
});
});
JSFiddle
$('.limit :checkbox').removeAttr('checked') is wrong. It will uncheck all your checkboxes.
Perhaps you meant $(this).removeAttr('checked') (but you already have this.checked=false)?
Set checked to false, then call button('refresh'):
$(this).prop('checked', false).button('refresh');
Here's a fiddle
Try this way:
$(function () {
$(".limit").buttonset();
var max = 3;
var checkboxes = $('input[type="checkbox"]', '.limit');
checkboxes.change(function () {
var current = checkboxes.filter(':checked').length;
checkboxes.filter(':not(:checked)').prop('disabled', current >= max).button('refresh');
});
});
Demo: http://jsfiddle.net/mbAwC/21/

jquery - limiting toggleClass to 2 elements

<script type="text/javascript">
$(document).ready(function () {
$('#mytable td').click(function () {
$(this).toggleClass('newclass');
});
});
</script>
This function changes the class of the selected column in my table. It works fine.
However it should not allow more than 2 columns being selected at once (by selected I mean the column having the new class toggled - newclass). So it simply should not react if other columns are clicked.
How would I do this? I could count how many columns currently use newclass and if it's 2 then cancel the function. I'm not sure how to count them or if this is the best way to do it.
here's one way to ensure no more than 2
jsfiddle
$('#mytable td').click(function() {
var $this = $(this);
// toggle 'on' if
// 1. it doesn't already have the class and
// 2. and there are less than two set to .newclass
// toggle 'off' if
// 1. it already has the class and
// 2. and there are less than two set to .newclass
$this.toggleClass('newclass',
!$this.hasClass('newclass') &&
$('#mytable .newclass').length < 2);
})
The size() method shows you how many other elements match that selector, so you can test against that before applying toggleClass():
<script type="text/javascript">
$(document).ready(function () {
$('#mytable td').click(function () {
if ($("#mytable td.newclass").size() < 2)
{
$(this).toggleClass('newclass');
}
});
});
</script>
Try using the length property like this:
<script type="text/javascript">
$(document).ready(function () {
$('#mytable td').click(function () {
if ($('#mytable td.newclass').length < 2)){
$(this).toggleClass('newclass');
}
});
});
</script>
Hope this helps!
<script type="text/javascript">
$(document).ready(function () {
$('#mytable td').click(function () {
if(!$(this).hasClass('newClass')){
if($("td.newClass").size() < 2){
$(this).toggleClass('newclass');
}
}
else {
$(this).toggleClass('newclass');
}
});
});
</script>

Categories

Resources