Develop Reference

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');
})

Check all/uncheck all - checkboxes and tabular data

I am currently using Footables to display tabular data. Each row has a checkbox. There is one master checkbox that selects all. I am running into some difficulties. The table has a filter. When I apply the filter and try to check all checkboxes within that filter it wont work. Also, since I am able to check all checkboxes at once is there away to uncheck all checkboxes? EXAMPLE
Checkbox function
$(document).on('change','input[name="check_all"]',function() {
$("input[type=checkbox]").attr('checked', true);
});
$(document).on('change','select',function() {
$('input[type=checkbox]').attr('checked', false);
});
table filter
$(function () {
$('table').footable().bind({
'footable_filtering': function (e) {
var selected = $('.filter-status').find(':selected').text();
if (selected && selected.length > 0) {
e.filter += (e.filter && e.filter.length > 0) ? ' ' + selected : selected;
e.clear = !e.filter;
}
},
'footable_filtered': function() {
var count = $('table.demo tbody tr:not(.footable-filtered)').length;
$('.row-count').html(count + ' rows found');
}
});
$('.clear-filter').click(function (e) {
e.preventDefault();
$('.filter-status').val('');
$('table.demo').trigger('footable_clear_filter');
$('.row-count').html('');
});
$('.filter-status').change(function (e) {
e.preventDefault();
$('table.demo').data('footable-filter').filter( $('#filter').val() );
});
});

use .prop() instead of .attr()
Check/uncheck only the visible rows
set the checked status to the select all checkboxes state
Try
$(document).on('change', 'input[name="check_all"]', function () {
$(".footable tr:visible input[type=checkbox]").prop('checked', this.checked);
});

try this one with not selecter which will select except the class .footable -filtered
$(document).on('change', 'input[name="check_all"]', function () {
$(".footable tr:not(.footable-filtered) input[type=checkbox]").prop('checked', this.checked);
});

Move and remove Listbox item to another listbox using jQuery in same places

I have 2 multi select boxes like as in this link. http://jsfiddle.net/bdMAF/38/
$(function(){
$("#button1").click(function(){
$("#list1 > option:selected").each(function(){
$(this).remove().appendTo("#list2");
});
});
$("#button2").click(function(){
$("#list2 > option:selected").each(function(){
$(this).remove().appendTo("#list1");
});
});
});
But When i add from one first select box to second select box it is working fine for
me.But again when i add from second select box to first select box they are appending to
last of first select box.But what i want is i need to add they must be added in the place
where they deleted.
Thanks in advance...

Maybe you can simply set and remove the attribute "disabled" but it will leave a blank space in the options. Note that with this method you will need to clone the option the first time.
The other solution whould be to add the content as usual but applying a sort() function before
function byValue(a, b) {
return a.value > b.value ? 1 : -1;
};
function rearrangeList(list) {
$(list).find("option").sort(byValue).appendTo(list);
}
$(function () {
$("#button1").click(function () {
$("#list1 > option:selected").each(function () {
$(this).remove().appendTo("#list2");
rearrangeList("#list2");
});
});
$("#button2").click(function () {
$("#list2 > option:selected").each(function () {
$(this).remove().appendTo("#list1");
rearrangeList("#list1");
});
});
});
You can try at this fiddle

You need to keep track of some sort of index, I think in your case you can use the value of each option. (but you could use a dedicated data-* attribute if you need to)
With that value you can then search the current list and see where it should fit in. Loop the options and check for a value greater than the one you are moving. If you find one then insert it before that, if you don't fine one then insert at the end.
This should do it:
$("#button2").click(function(){
$("#list2 > option:selected").each(function(){
var item = $(this).remove();
var match = null;
$("#list1").find("option").each(function(){
if($(this).attr("value") > item.attr("value")){
match = $(this);
return false;
}
});
if(match)
item.insertBefore(match);
else
$("#list1").append(item);
});
});
You can apply the same for the reverse too.
Here is a working example

After adding the options back to #list1, a simple sort() will do the rest. For that we need to add a comparison function to it based on its value.
$(function () {
$("#button1").click(function () {
$("#list1 > option:selected").each(function () {
$(this).remove().appendTo("#list2");
});
});
$("#button2").click(function () {
$("#list2 > option:selected").each(function () {
$(this).remove().appendTo("#list1");
var opts = $('#list1 option').get();
$('#list1 ').html(opts.sort(optionSort));
});
});
function optionSort(a, b) {
return $(a).val() > $(b).val();
}
});
Check out this JSFiddle
You can also sort using text() instead of val() by changing it in the optionSort().

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>

Increasing a number by 1 using jquery?

$('.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();
});