jQuery console.log和名称附加不起作用

Question

I'm using a plugin to give my <select> elements images loaded by jquery. The thing is, the names are not transferring to the new code's <input> elements, and thus cannot submit the form surrounding it.

The plugin turns this code:

<select id="itemselect1" name="item1">
    <option>1</option>
    <option selected>2</option>
    <option>3</option>
</select>
<select id="itemselect2" name="item3">
    <option>A</option>
    <option>B</option>
    <option selected>C</option>
</select>

Into: (I simplified it a bit)

<div id="itemselect1" name="item1" class="dd-container">
    <div class="dd-select">
        <input class="dd-selected-value" value="2" type="hidden">
    </div>
</div>

<div id="itemselect2" name="item2" class="dd-container">
    <div class="dd-select">
        <input class="dd-selected-value" value="C" type="hidden">
    </div>
</div>  // the list continues

So I tried this approach to transfer the names over:

var list = {
  "itemselect1": "item1",
  "itemselect2": "item2",
  "itemselect3": "item3",
  "itemselect4": "item4",
  "itemselect5": "item5",
  "itemselect6": "item6"
};
$.each( list, function( key, value ) {
  $("#"+ key).children().children("input.dd-selected-value").attr("name", value );
  console.log(key);
  console.log(value);       
  console.log($("div#"+ key).attr("name"));   // To diagnose why it isnt working
});

And the console just reads:

itemselect1 (index):32
item1 (index):33
undefined (index):34
itemselect2 (index):32
item2 (index):33
undefined (index):34

Regardless if I use the plugin or now, the names aren't getting attached somehow. Please help, Thanks.

Answer 1

use find () in jquery. you assigned name attribute to input but you print and check the parent div name so it gives undefined.

$.each( list, function( key, value ) {
  $("#"+ key).find(".dd-select input.dd-selected-value").attr("name", value);  
  console.log($("#"+ key).find("input.dd-selected-value").attr("name"));   
});