如何通过嵌套子列表中的JavaScript保存父ID

Question

I have a nested list with any number of li's and any number of ul's inside the li's where every li has 2 hidden inputs: an id and an id of the parent.

<ul>
    <li>
        <input type="hidden" name="question[id][]" value="'. $sub['id'] .'" />
        <input type="hidden" name="question[parent][]" value="'. $question['id'] .'" />
        <ul>
            <li>
            <input type="hidden" name="question[id][]" value="'. $sub['id'] .'" />
            <input type="hidden" name="question[parent][]" value="'. $question['id'] .'" />
            </li>
        </ul>
    </li>
    <li>
        <input type="hidden" name="question[id][]" value="'. $sub['id'] .'" />
        <input type="hidden" name="question[parent][]" value="'. $question['id'] .'" />
        <ul>
            <li>
            <input type="hidden" name="question[id][]" value="'. $sub['id'] .'" />
            <input type="hidden" name="question[parent][]" value="'. $question['id'] .'" />
            </li>
        </ul>
        <ul>
            <li>
            <input type="hidden" name="question[id][]" value="'. $sub['id'] .'" />
            <input type="hidden" name="question[parent][]" value="'. $question['id'] .'" />
            </li>
        </ul>
    </li>

</ul>

I am using jQuery sortable to sort the nested list and now after sorting them I need to save the appropriate parent id to each item in the sublist.

Theoretically the parent id of each sub question is the value of the first input of the second closest ul. Also if there is no parent ul, then I want to set the parent id to 0. How do I find it? This is what I have so far:

$('#reorder_form').submit(function(){
    $('li').each(function() {
        $id = $(this).closest('ul').closest('li').find("input[name='question[id]']").val();
        if(typeof($id) == 'undefined') $id=0;
        $(this).find("input[name='question[parent]']").val($id);
    });
});

I am not 100% sure that this is how you properly loop through each input because I am hitting each twice. Perhaps I should loop through the li's instead?

Answer 1

You want to go up to the closest li, then up again to the closest li before that then back to the input. To be really semantic:

$id = $(this).closest('li').closest('li').find('input[name^="question[id]"]').first().val();

Not checked. I would do it in jsfiddle but it appears to be broken.

$('li input[name^="question[parent]"]').each(function() {
  var $id = $(this).closest('li').closest('li').find('input[name^="question[id]"]').val();
  if(typeof($id)=="undefined") $id=0; 
  $(this).val($id);
});

Just one note if .save points to a button in a form bear in mind there is (usually) more than one way to submit a form. $('#theform').on('submit', function(){...}); is the best method.

Also

if(typeof($id) == undefined) 

I'm pretty sure that would always return false because typeof won't == undefined, it will be a value, which may be 'undefined'.

if(typeof($id) == "undefined")

Answer 2

This is the code to save the id and parent id of any number of li's containing any number of ul's containing any number of li's with the cooresponding html from the question. I admit it is slightly hackish, but it is what I came up with. Hope it helps someone.

        $('#reorder_form').submit(function(){
            $('li input[name^="question[parent]"]').each(function() {
                $ul = $(this).closest('ul').parent().closest('ul');
                $attr = $ul.attr("class");
                if(typeof($attr) == 'undefined')
                    $id=0;
                else
                    $id = $ul.find("li input[name^='question[id]']").val();
                $(this).val($id);

            });
        });