How to get the id of the parent and the position of an li item

Question

Hello. I want to change a nested Navigation by drag and drop and i find a nice plugin. Now i want to store the changes in the database, but unfortually I can't read out the id of the parent element. The second thing what I need is the new position of the dragged li element in the list

<script type="text/javascript" src="includes/jquery/jquery.js"></script>
<script type="text/javascript" src="includes/jquery/interface.js"></script>
<script type="text/javascript" src="includes/jquery/inestedsortable-1.0.pack.js"></script>
<script type="text/javascript">
    jQuery( function($) {
     $('#Hnav, #Nnav').NestedSortable(
      {
       accept: 'sort',
       noNestingClass: "no-children",
       helperclass: 'helper',
       autoScroll: true,
       onChange: function(serialized) {
         onStop : function(){
           $('#output').html($(this).id); // works fine
           $('#output').html($(this).parent().parent().att('id')); // fail
                  $('#output').html(this.closest('li').att('id')); // fail
         },
       nestingPxSpace : '0'
      }
     );
    });
</script>

---

html

<div id="sitemap">
<ul id="Hnav">
  <li id="n1"><a href="contentsite.php?cont=1">Home</a></li>
  <li id="n2" class="sort"><a href="contentsite.php?cont=2">Choir</a>
    <ul class="level2">
      <li id="n4" class="sort"><a href="contentsite.php?cont=3">lkff</a></li>
      <li id="n6" class="sort"><a href="contentsite.php?cont=5">changethis</a></li>
      <li id="n5" class="sort"><a href="contentsite.php?cont=4">History</a></li>
    </ul>
  </li>

...

Any idea? Thank you.

Lara

Answer 1

My guess is you have to wrap this with the $() syntax if you're calling parent() on it:

$('#output').html(this.id); // works fine
$('#output').html($(this).parent().parent().attr('id'));
$('#output').html($(this).closest('li').attr('id'));

Edit:

I have updated the code in response to your comment. jQuery objects do not support .id, they must use .attr('id').

Answer 2

You could use either:

 $('#output').html($(this).parent().parent().attr('id')); // or
 $('#output').html($(this).closest('li').attr('id')); // or
 $('#output').html(this.parentNode.parentNode.id);