Question

I’m a beginner in jQuery and here’s what I’m trying to do:

• Find all elements (let’s call them boxes to avoid confusion later) with class “chosen” and assign a number to each.
• In each of those boxes, find all input elements in them.
• To each input element’s name add it’s box number. For instance, if in 3rd box there was a text input element called “login”, it should be renamed to “login3”.

Here’s the code I made so far:

boxes = $('.chosen');
for(a = 0; a < boxes.length; a++) {
    inputsinboxes = boxes[a].children('input');
    for(b = 0; b < inputsinboxes.length; b++) {         
        inputsinboxes[b].name = inputsinboxes[b].name + (a+1);
    }
}

I’m stuck though since it keeps telling me boxes[a].children is not a function.

What am I doing wrong?

Answer 1

When you use array index notation (brackets) to access an element from a jQuery object, you don’t get a jQuery object back. You get the underlying DOM node. http://api.jquery.com/get/

Start by using .each() to make this more idiomatic jQuery:

$('.chosen').each(function (i) {
    $(this).children('input').prop('name', function () {
        return this.name + (i+1);
    });
});