TheWandererr TheWandererr - 3 months ago 8
HTML Question

Get the first Id from a list after it has been sorted via Jquery UI Sortable

Szenario:
I am creating a mobile website where a user can sort a list of Names useing the Jquery UI sortable Option.
And based on the order of the List the user will get more information about it in the next page...
The List looks something like this:


<div id="NameContainer" class="ui-widget">
<div id="sortable_0">John</div>
<div id="sortable_1">Markus</div>
<div id="sortable_2">Alex</div>
<div id="sortable_3">Gabriel</div>
<div id="sortable_4">Thomas</div>
<div id="sortable_5">Jack</div>
<div id="sortable_6">Jessica</div>
<div id="sortable_7">Anna</div>
</div>



The divs get added Dynamically to the website with an ongoing ID.

If the user clicks a button(that will direct him to a new page) i want to get the current(after the user has sorted the list) first Elements id from that list.
At the moment i am using this to get the Id:

$("#NameContainer div:first-child").attr("id"));


But i always get the the id from the the first Div that has been added to the List "sortable_0". How can i manage to get the top position after the list has been sorted?

Answer

You Select Main Div And Then Select Its First Or Last Or Children Now Its Working Properly

$(document).ready(function(){
alert($('#NameContainer').find('div:first').attr("id"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="NameContainer" class="ui-widget">
      <div id="sortable_0">John</div>
      <div id="sortable_1">Markus</div>
      <div id="sortable_2">Alex</div>
      <div id="sortable_3">Gabriel</div>    
      <div id="sortable_4">Thomas</div>
      <div id="sortable_5">Jack</div>
      <div id="sortable_6">Jessica</div>
      <div id="sortable_7">Anna</div>
</div>