Jquery Draggable Sortable write into correct Input, get child element not working

Question

I´m trying to reorder a set of photos inside a sortable ul; to save them in the new order I have to overwrite the matching input fields (name and title):

That's my ul structure :

    <ul class="float drag1">
    <g:each in="${fotos}" var="foto" status="index" >
        <li class="float editimg 1" id="${index}">
            <div class="float imgbox">
                <span class="floatr imgdel" onclick="deletePicture('${foto.name}')" title="Löschen"></span>
                <img src="${di.createImageURL(bucket:'foo', name: foto.name, format:'m')}" alt="${foto.titel}" />
                <g:hiddenField name="fotos[${index}].name" readonly="readonly" value="${foto.name}"/>
            </div>
            <input type="text" name="fotos[${index}].titel" class="fototitel"  value="${foto.titel}"/>
        </li>
    </g:each>
</ul>

and thats my JS

<script type="text/javascript">
$( sort );
function sort() 
{$('.drag1').sortable({
update: function(event,ui) {
    var draggingElement = $(ui.item);
    var ordering = draggingElement.index();
    var string1 = 'fotos['+ordering+'].name' ;
    var string2 = 'fotos['+ordering+'].titel' ;
    alert(string1+'---'+string2);
    //the following part doesn´t work, when i give those inputs unique id´s it work´s but i want this to be more self fulfilling.
    var inputs = draggingElement.getElementsByTagName("input");
    inputs[0].attr('name',string1);
    inputs[1].attr('name',string2);
 }
});
}
</script>

Alerting string1 and string2 shows that those are correct, I just need to update the name attribute of the inputs. But in the example above i get a typeError

draggingElement.getElementsByTagName is not a function

I can´t figure out how to get the child inputs of the draggingElement.

Answer 1

In place of

var inputs = draggingElement.getElementsByTagName("input");
inputs[0].attr('name',string1);
inputs[1].attr('name',string2);

try this

var inputs = draggingElement.find("input");
inputs.eq(0).attr('name',string1);
inputs.eq(1).attr('name',string2);

Answer 2

I think getElementsByTagName will get you HTML element objects, whereas you want jQuery element objects - in order to use the attr method.

Check the jQuery manual to get the right method to return an array of jQuery elements, and then either use the array access approach as you have done, or run an each iterator over them.

Answer 3

Posted on behalf of the OP in lieu of a question addendum.

Here´s the script that does what I need, thanks for answers.

$( sort );
function sort() {
    $('.drag1').sortable({
    update: function(event,ui) {
        var draggingElement = $('.editimg');
        draggingElement.each(function() {
            var ordering = $(this).index();
            var string1 = 'fotos['+ordering+'].name';
            var string2 = 'fotos['+ordering+'].titel';
            var inputs = $(this).find("input");
            inputs.eq(0).attr('name',string1);
            inputs.eq(1).attr('name',string2);
       });
     }
    });
};