Сценарий:
Я создаю мобильный веб-сайт, на котором пользователь может сортировать список имен, используя параметр сортировки пользовательского интерфейса JQuery.
И в зависимости от порядка списка, который пользователь будет подробнее об этом читайте на следующей странице ...
Список выглядит примерно так:

<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>


Дивы добавляются на сайт динамически с постоянным идентификатором.
Если пользователь нажимает кнопку (которая направит его на новую страницу), я хочу получить текущий (после того, как пользователь отсортировал список) первый идентификатор элемента из этого списка.
В настоящий момент я использую это для получить идентификатор:

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

Но я всегда получаю идентификатор из первого Div, который был добавлен в список sortable_0. Как я смогу занять первое место после сортировки списка?

2
TheWandererr 6 Сен 2016 в 11:54

3 ответа

Лучший ответ

Вы выбираете основной Div, а затем выбираете его первый или последний или дочерние элементы, теперь он работает правильно

$(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>
3
Samudrala Ramu 6 Сен 2016 в 09:02

Проверьте это .. Надеюсь, это вам поможет

$( function() {
    $( "#NameContainer" ).sortable({
       stop : function(event,ui){ 
         console.log($( "#NameContainer > div:first" ).attr('id')); 
       }
    }
  );
    $( "#NameContainer" ).disableSelection();
  } );
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
<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>
2
Haresh Vidja 6 Сен 2016 в 09:30

Попробуйте использовать serialize для форматирования строки, проверьте этот jsfiddle, надеюсь, это тоже поможет http: // jsfiddle.net/keshann/yr273kx2/1/

2
Keshan Nageswaran 6 Сен 2016 в 09:19