Develop Reference

get value only works using .first, but if i try to loop for each item with .each it does nothing

I want to be able to select multiples images when pressing the upload button and be able to see all of them. At the moment I made a simplify version where I want to see the url of the images in a label. At the moment I only can accomplish it by getting the first or last element:
var media_attachment = meta_image_frame.state().get('selection').first().toJSON()
meta_label.text(media_attachment.url)
But i really want to see all the url, so keeping that code in mind i tried to made a modified version using .each like this:
var media_attachment = meta_image_frame.state().get('selection').each(function(){
var media_attachment_tr = $(this).first().toJSON();
meta_label.append(media_attachment_tr.url);
});
meta_label.append(" isdone");
But this does nothing, even the "isdone" part is not appending to the code and i have no idea of why this is happening. There is a way to make this itereable?

You are using .each wrong. jQuery's .each takes 2 arguments. The first being the object that you want to iterate over and the second one is the callback, see this example from the documentation:
$.each([ 52, 97 ], function( index, value ) {
alert( index + ": " + value );
});
Additionally, the callback function takes also 2 arguments that you can use in the body of the function: the index and the value of the item from the object that it iterates over.
If you want to use jQuery's .each, you'll need to restructure the code, but I'd suggest using JavaScript's .forEach instead, which does sort of what you have in your code. You just need to add one or two argument in the callback function - the first being the current item from the list and the second, optional, is the index.
Your code (without insuring functionality) could look like this:
var media_attachment = meta_image_frame.state().get('selection').forEach(function(media){
var media_attachment_tr = media.toJSON();
meta_label.append(media_attachment_tr.url);
});

jQuery append() for multiple elements after for loop without flattening to HTML

I have a loop:
for (index = 0; index < total_groups; index += 1) {
groups[index].list_item = $(list_item_snippet);
// Closure to bind the index for event handling
(function (new_index) {
groups[index].list_item.find('.listing-group-title')
.html(groups[index].Group.Name)
.click(function(e){
fns.manageActiveGroup(new_index, groups);
return false;
});
})(index);
// Append to DOM
mkp.$group_listing.append(groups[index].list_item);
};
I would rather not call append() each time the loop fires.
I know that I could use a String and concatenate the markup with each loop iteration and append the string to mkp.$group_listing at the end, however this flattens the object and the bindings are lost (I am not relying on IDs).
Is there a way to perhaps add my objects to an array and append them all in one go at the bottom without flatening to HTML?
Assumptions:
$(list_item_snippet) contains some HTML defining a list item (and includes an element with class .listing-group-title).
groups is a block of JSON defining a 'group' in my script
The closure works perfectly
Edit:
Found that I can use the following syntax to append multiple elements:
mkp.$group_listing.append(groups[0].list_item, groups[1].list_item );
But i obviously need to automate it - it's not an array it's just optional additional function parameters so I'm not sure how to do this.

To append an array of elements to a selector you can use this:
$.fn.append.apply($sel, myArray);
In your case, since it's actually the .list_item property of each array element that you need you can use $.map to extract those first:
$.fn.append.apply(mkp.$group_listing, $.map(groups, function(value) {
return value.list_item;
}));

Instead of bind it the way you've done, if you bind it using on() like below,
$(document).on('click', '.listing-group-title', function() {
// click handler code here
});
You can flatten the HTML and append it in one statement and it'll still work.
Note: For better efficiency, replace document in the above statement to a selector matching the closest parent of .listing-group-title

Yes. Use the jQuery add method to add all your items to a jQuery object. Then append that one object.
http://api.jquery.com/add/
EDIT: Example:
var arr = $();
for (index = 0; index < total_groups; index += 1) {
groups[index].list_item = $(list_item_snippet);
// Closure to bind the index for event handling
(function (new_index) {
...
})(index);
// Add to jQuery object.
arr.add(groups[index].list_item));
};
mkp.$group_listing.append(arr);

Javascript Remove Form Data

I have a form that I want to only submit post data for value which have changed.
So the way I have been doing this is like this:
function submit_form(){
var hd = [];
// hd is a big array that is defined here
// hd ['some id_number'] = 'some value'
// main function
for (var id_number in hd ){
var x=document.getElementById(id_number).selectedIndex;
var y=document.getElementById(id_number).options;
selector_text = y[x].text;
if (hd[id_number] == selector_text){
$(id_number).remove();
}
}
document.forms["my_form"].submit()
}
So the goal is that if the selector equals what is in the array, then don't POST the data.
To do this I have been doing the remove function. Everything up to the remove function works as expected. However when I look at the post data I still get the selected value for the id_numbers that mach the value in hd.
Is there a better way to remove to prevent it from going to the POST data? The id.parent.removeChild(id) method didn't work either.

The jQuery id selector should begin with a #, but yours appears not to:
$('#' + id_number).remove();
Your for-in loop should be a regular incremental for loop, which is the proper way to iterate an array in JavaScript. for-in loops are typically used for iterating object properties rather than array elements.
for (var i=0; i<hd.length; i++) {
// Access hd[i] in the loop
var x=document.getElementById(hd[i]).selectedIndex;
var y=document.getElementById(hd[i]).options;
selector_text = y[x].text;
if (hd[i] == selector_text){
$('#' + hd[i]).remove();
}
}
Since you aren't really using jQuery here except for that line, instead the plain JS version is:
var removeMe = document.getElementById(hd[i]);
removeMe.parentNode.removeChild(removeMe);

Access element of Mootools array

I'm using a bit of Mootools to access the values of an HTML select element but the thing is that the way to do it with Mootools [.getSelected()] returns an array and I don't know how to handle it.
my code :
<script type="text/javascript">
window.addEvent('domready', function(){
$('votconj').addEvent('click', function() {
// This works great
$('jj_conjoint').addClass("validate['required']");
$('mm_conjoint').addClass("validate['required']");
$('aaaa_conjoint').addClass("validate['required']");
$('conjoint_regime').addClass("validate['required']");
new FormCheck('form');
});
if ($('nb_children').getSelected() == 1){
// this doesn't work because .getSelected() returns an array and never equals 1
$('jj_enfant1').addClass("validate['required']");
$('mm_enfant1').addClass("validate['required']");
$('aaaa_enfant1').addClass("validate['required']");
new FormCheck('form');
}
if ($('nb_children').getSelected() == 2){
// this doesn't work because .getSelected() returns an array and never equals 2
$('jj_enfant2').addClass("validate['required']");
$('mm_enfant2').addClass("validate['required']");
$('aaaa_enfant2').addClass("validate['required']");
new FormCheck('form');
}
new FormCheck('form');
});
</script>

getSelected() returns an array because some select elements allow multiple selection. If yours doesn't, you could just try $('nb_children').getSelected()[0]. To get the value you can use $('nb_children').getSelected()[0].get("value").

You can use .each to traverse an array in MooTools:
var selected = $('nb_children').getSelected();
selected.each(function(element) {
var val = element.get('value');
$('jj_enfant' + val).addClass("validate['required']");
//etc
}
new FormCheck('form');
For more info: http://mootools.net/docs/core/Types/Array#Array:each
The reason why getSelected() returns an array at all times, is that code like this can always be reused when you decide to add multiple selectable items instead of just one.
Edit
Note that the above code is directly written. Might need some tweaking to get it working for your case.
Edit 2
Updated code to a more comprehensive example.

You want to check the value of the selected item, right?
Try with:
if ($('nb_children').getSelected().get('value') == 1){//...

Iterating through a jQuery object array

I know this has been asked and answered a couple times already, but I'm still confused about how to reference the current object when iterating over a jQuery array. For example, the following code gives me the error TypeError: genH3Array[i].next is not a function. What is the right way to reference the current array object?
var genH3Array = $('#Generation_II').parent();
genH3Array.push($('#Generation_III').parent());;
genH3Array.push($('#Generation_IV').parent())
$.each(genH3Array, function(i, value)
{
if(genH3Array[i].next().attr("align") == "center")
{ genH3Array[i].next().next().next().insertBefore(heading.next())
}
genH3Array[i].next().next().insertBefore(heading.next())
genH3Array[i].next().insertBefore(heading.next())
})
EDIT: Thanks for all your help, everyone. I know this was probably a cinch for most of you, but it was a major headache for me. The corrected code is below:
var genH3Array = $('#Generation_II,#Generation_III,#Generation_IV').parent();
$.each(genH3Array, function(i, value)
{
console.log($(this).next());
if($(this).next().attr("align") == "center")
{
$(this).next().next().next().insertBefore(pokemonHeader.next())
}
$(this).next().next().insertBefore(pokemonHeader.next())
$(this).next().insertBefore(pokemonHeader.next())
$(this).insertBefore(pokemonHeader.next())
})

This part:
var genH3Array = $('#Generation_II').parent();
genH3Array.push($('#Generation_III').parent());
genH3Array.push($('#Generation_IV').parent());
...isn't really the way to use .push() against a jQuery object. When you .push() a value in, it should be a DOM element. Not a jQuery object.
You could simplify that entire bit like this:
var genH3Array = $('#Generation_II,#Generation_III,#Generation_IV').parent();
Now you'll have the .parent() of all three in the object.
Not entirely sure what the each is supposed to do, but it seems like you're trying to take the next three elements of each one, and insert them after some heading element.
$.each(genH3Array, function(i, value) {
if($(this).next().attr("align") == "center") {
heading.after( $(this).nextUntil('sometarget:last') );
}
heading.after( $(this).nextUntil('sometarget') );
});
I really don't know if this is what you want. It's a little hard to tell.

Both value and this point to the current item in the iteration, but that isn't your problem. Your problem is that the item returned by [] on a jQuery object isn't a jQuery object. You could do this:
$(genH3Array[i]).next()

Adding to what #patrick dw said: once you get the right selector, you can use the following syntax:
var getH3Array = ('#Generation_II,#Generation_III,#Generation_IV').parent().each(function() {
$(this); // this references the dom element matched, so:
if($(this).next().attr("align") == "center") {
// do something here
}
});

I think what you want is
var array = $("#c1, #c2, #c3").parent();
$.each(array, function(){
console.log($(this).next());
});
In $.each callback, the this variable point to the current element. If you are iterating through a jquery array like what you have, it will be iterating through the dom elements not jQuery objects, so you need to get the jQuery objects corresponding to them by using $(this).
jQuery.each