We Keep Coding

Getting values of each row of a html table and storing in a variable to be used later

On the click event of a button I am reading the rows of a html table
and all I get with the alert is shown in the attached image.
I want to be able to get the value highlighted in yellow and store in a variable.
How can I achieve that?
$(document).on("click", "#AMeter", function () {
$('#Meters1 .numval').each(function () {
alert($(this).html());
});
});

You can use find() to get the input within #AMeter and then val() to get its value:
$(document).on("click", "#AMeter", function () {
$('#Meters1 .numval').each(function () {
var numval = $(this).find('input').val();
// use numval here...
});
});
Alternatively, if you want to build an array of all the .numval values in the row, you can use map():
$(document).on("click", "#AMeter", function () {
var values = $('#Meters1 .numval input').map(function () {
return this.value;
}).get();
// use values here...
});

Swap two items on clicks

I want to select two elements and when I click the button element I want them to swap place, how would I do that? I've searched and looked for similar answers, but most of them only swap the element up or down.
I'm thinking something like:
$('button').click(function(){
$('#item 1 .selected-item').removeClass('.selected-item').appendTo('#item2');
$('#item 2 .selected-item').removeClass('selected-item').appendTo('#item1');
});
But I don't know how to start, it should look something like this:
http://jsfiddle.net/tLNAh/1/ (my fiddle)

try this.
http://jsfiddle.net/tLNAh/3/
$("button").on("click", function() {
$first = $(".selected:eq(0)");
$second = $(".selected:eq(1)");
var tempText = $first.text();
$first.text($second.text());
$second.text(tempText);
$("#instructionText").text("Instructions: choose an item");
});

With your markup do this:
$("button").on("click", function() {
$('.selected').insertBefore($('ul:eq(1) li:first'));
});
Demo
Or you can update to this:
$("button").on("click", function() {
if($('.selected').closest('ul').index() < $('.selected').closest('ul').siblings('ul').index()){
$('.selected').insertBefore($('ul:eq(1) li:first'));
}else{
$('.selected').insertBefore($('ul:eq(0) li:first'));
}
});
Updated fiddle

Chk this : fiddle link
Provide id to your ul :
<ul id="item1">
<ul id ="item2">
And try this :
$("button").on("click", function() {
$("#instructionText").text("Instructions: choose an item");
$('#item1 .selected').removeClass('selected').remove().appendTo('#item2');
$('#item2 .selected').removeClass('selected').remove().appendTo('#item1');
});
$("body").on("click","li", function(e) {
$(this).toggleClass("selected");
$("#instructionText").text("Instructions: choose the item to change place with");
});

You have to get index of list elemet and use this:
http://jsfiddle.net/faceleg/FJt9X/2/
var swapElements = function(siblings, subjectIndex, objectIndex) {
// Get subject jQuery
var subject = $(siblings.get(subjectIndex));
// Get object element
var object = siblings.get(objectIndex);
// Insert subject after object
subject.insertAfter(object);
}
$(function() {
swapElements($('li'), 0, 1);
});

Try this:
function swapItems(first, second) {
var sibling = first.next();
if (sibling.length) {
first.insertBefore(second);
second.insertBefore(sibling);
} else {
sibling = first.prev();
if (sibling.length) {
first.insertBefore(second);
second.insertAfter(sibling);
} else {
var parent = firstItem.parent();
first.insertBefore(second);
second.appendTo(parent);
}
}
}
Updated fiddle
Edit: I updated the fiddle, now you have to click the button to swap items.

Confused with calling JQuery custom function

I have html like so
<span rel='comm' val='12'>click</span>
<span rel='comm' val='82'>click</span>
and I am using JQuery to do this
$('span[rel*=comm]').cust();
and the custom function is as such
$.fn.cust = function () {
$(this).click(function(e) {
alert($(this).val());
});
}
The value of this is 12 even when I click on 2nd span which should give me 82
Any help would be appreciated.

You'll need to return a seperate function for each element in the collection, normally done with return this.each ...
$.fn.cust = function () {
return this.each(function() {
$(this).click(function(e){
alert($(this).val());
});
});
}
And value is not a valid attribute for a span element.

This should work better:
$.fn.cust = function () {
$(this).click(function (e) {
alert($(this).attr('val'));
});
}
span does not have value.
http://jsfiddle.net/dREj6/
Also if you want to make your method chainable you should return an jQuery instance:
$.fn.cust = function () {
return $(this).click(function (e) {
alert($(this).attr('val'));
});
}
$('span[rel*=comm]').cust().css('color', 'red');
http://jsfiddle.net/dREj6/1/

rel are for links (anchor element) - use class
use data attribute instead of custom attributes
http://jsbin.com/ogenev/1/edit
<span class='comm' data-val='12'>click</span>
<span class='comm' data-val='82'>click</span>
$.fn.cust = function(){
$(this).click(function(){
alert(this.dataset.val);
});
};
$('.comm').cust();

It works if you use .attr('val')
$.fn.cust = function () {
$(this).click(function(e){
alert($(this).attr('val'));
});
}
$('span[rel*=comm]').cust();
http://jsfiddle.net/fW7FT/
.val() is for input since they're the only one accepting the val attribute officialy

The call $('span[rel*=comm]') returns a JQuery wrapper for all spans matching the selector - the two ones you have in your example are picked both.
Now inside the definition of cust, $(this) refers to the wrapped array, which causes your issue. Use
$(this).each( function() {
$(this).click (...
});
Inisde each $(this) will point to each separate span element in the selection, so they will have the click handler individually attached and working as you expect.

You can achieve what you're looking for with this:
HTML:
<span rel='comm' val='12'>click</span>
<span rel='comm' val='82'>click</span>
JS:
var cust = function(source) {
alert($(source).attr('val'));
}
$('span[rel*=comm]').click(function(e) {
cust(this);
});
The JSFiddle working: http://jsfiddle.net/ejquB/

Remove class using index

This might be easy but I am having trouble in getting it to work. I am using .each() to iterate through a list. I was wondering if it is possible to remove a class using the index.
eg. If there were 10 items in the list and I want to remove the class from the 5th element when I click the 8th element for example.
$(function () {
var items = $('#v-nav>ul>li').each(function (index) {
$(this).click(function () {
if (index = 8)
{
$(#5).removeClass('class');
}
});
});
Anyone with any ideas? Thank you

Change
$(#5).removeClass('class');
To
$('#v-nav>ul>li:eq(4)').removeClass('class');
Its better to assign the element returned by your selector to do the same processing again to get desired element.
$(function () {
var items = $('#v-nav>ul>li')
$('#v-nav>ul>li').click(function () {
if ($(this).index() = 8)
{
$(items).eq(4).removeClass('class');
}
});
});

There's no need to iterate with each(), as each element already has an index, and using eq() will let you select elements based on the index they have in the DOM. This solution is dependant on the elements being siblings() etc.
$(function () {
var elems = $('#v-nav>ul>li');
elems.on('click', function() {
if ($(this).index()==8) elems.eq(4).removeClass('class');
});
});
You could also just bind the click to that one element:
$(function () {
$('#v-nav>ul>li:eq(7)').on('click', function() {
$(this).siblings().filter(':eq(4)').removeClass('class');
});
});
Otherwise I would just do:
$(function () {
var elems = $('#v-nav>ul>li');
$.each(elems, function(idx, elm) {
if (idx==8) elems.eq(4).removeClass('class');
});
});
As a sidenote ID's consisting of just a number (or starting with a number) is invalid.

Actually you don't need to iterate over all the li elements, instead you can do it like this way
$(function(){
$('#v-nav>ul>li').eq(7).on('click', function(){ // eq(7) is 8th li
$(this).closest('ul').find('li').eq(4).removeClass('cls'); //eq(4) is 5th li
});
});
DEMO.

how to attach onclick event to an array of elements (mootools)

Is there a syntax for the following thing:
$$('.a-lot-of-elems').addEvent('someevent',somefunction);

First off - the following will work just fine.
$$(selector).addEvents({
click: fn
});
Don't use for, to iterate through an element collection, use each instead:
$$(selector).each(function(el){
el.addEvents({
click: fn
});
});
Here's a working example: http://jsfiddle.net/EPYBx/

You are just missing the event type.
var someFunction = function(e) {
alert('clicked!');
}
$$('.a-lot-of-elems').addEvent('click', somefunction);
Alternatively, you can use
$$('.a-lot-of-elems').addEvent('click', function(e) {
alert('clicked!');
});

something like
var elements = $$('.a-lot-of-elems')
for(var i = 0 ; i < elements.length ; i = i + 1)
{
elements[i].addEvent(somefunction);
}
should do ya!