Question

So I’ll start off by saying I’m completely new to JS and JSQuery. So I’m in the following situation. The page has a structure like:

<div id="id1">
   <input name="input1" .... >
   .....
</div>

<div id="id2" disabled="disabled">
   <input name="input1"  ....>
</div>

.....

So the names of the inputs will repeat themselves, only on different divs and only one div will not be disabled at a given moment. I need to be able to get a input element with a given name from a div with a given ID. My approach after reading a bit:

var inputs = $('div[id="' + parent_div +'"] input').filter(function() {
            return (this.hasOwnProperty('name') && (typeof this.name  != "undefined") && this.name == component_name);
        });;
for (input in inputs){
   alert(inputs[input]);
   alert(inputs[input].name);           
    } 

Now I would expect this to return only my given component. However the result is very strange to me as a beginner. The alerts will be return something like the following:

objectHTMLInputElement
component_name —- so the first one is the correct one, but after:

1
undefined

object Object
undefined

object HTMLDocument
undefined

div[id=”data_modelHR”] input.filter(function () {
return (this.hasOwnProperty(‘name’) && (typeof this.name != “undefined”) && this.name == component_name);
})
undefined

And this goes on for a while with different functions. Any suggestions?

Regards,
Bogdan

Answer 1

Don’t walk an Array using foo in bar if you want to iterate over it’s indexed elements.

See what you will get: http://jsfiddle.net/doktormolle/7qzcv/
You get the indexed elements 0+1, but also all methods/properties of an jQuery-object.

Use:

for (var i=0;i<inputs.length;++i){
   alert(inputs[i]);
   alert(inputs[i].name);           
    } 

Or the jquery-way:

inputs.each(function(i,o){alert(o);alert(o.name); })