javascript - 检查多个 div 的数据索引是否有序的 jQuery 函数

Question

我随机输出每个都有数据索引的 div 的顺序。我将 jQuery-ui 用于其可排序方法，以便用户可以重新排列 div 的顺序。我怎样才能做到，当您按下提交按钮时，调用一个函数来检查每个元素的数据索引是否有序？

DOM 结构如下所示:

<div class="sequence_boxes sortable sortable_area ui-sortable">
  <div class="box" data-index="0">..</div>
  <div class="box" data-index="1">..</div>
  <div class="box" data-index="2">..</div>
  <div class="box" data-index="3">..</div>
</div>

我的 jQuery:

$('.sequencing').append('<div class="sequence_boxes sortable sortable_area"></div>');

$('.sequence_option').each(function (i) {
    $('<div class="box"></div>').appendTo($('.sequence_boxes')).append(this);
    $(this).attr("data-index", i);
    $(this).parent().attr('data-index', i);

});

$('.sequence_boxes').each(function () {

    // get current div
    var $div_parent = $(this);

    // get array of childs in parent div
    var $divsArr = $div_parent.children('.box');

    // sort array of childs in parent div (#sponsors) randomly
    $divsArr.sort(function (a, b) {

        // Get a random number between 0 and 10
        var temp = parseInt(Math.random() * 10);

        // Get 1 or 0, whether temp is odd or even
        var isOddOrEven = temp % 2;

        // Get +1 or -1, whether temp greater or smaller than 5
        var isPosOrNeg = temp > 5 ? 1 : -1;

        // Return -1, 0, or +1
        return (isOddOrEven * isPosOrNeg);
    })

    // append child items to parent
    .appendTo($div_parent);
});



$('.sortable_area').sortable({
    dropOnEmpty: true,
    forcePlaceholderSize: true,
    forceHelperSize: false,
    connectWith: ".sequence_boxes",
    scrollSensitivity: 200,
    scrollSpeed: 40,
    placeholder: "ui-sortable-placeholder",
    cursor: "move",
    distance: 0.5,
    delay: 100,
    opacity: 0.6,
    tolerance: "pointer",


}).disableSelection();

Answer 1

解决方法很简单:

DEMO

  var correct_index = 0;
  $('.box').each(function(){
    var current_index = $(this).data('index');
    if(current_index != correct_index) {
      alert('Out of order');
      return false;
    } 
    correct_index++;
  });

更新:

This 是一个更一致的实现:

您的案例:

$('.sequence_boxes .box').isOrdered('asc', 'index');

用法:

$(selector).isOrdered(order, data, [fail], [success]);

});

• order:'asc' 或 'desc'(排序依据)。
• data: 'index' ... 任何数据(您的数据类型)。
• fail [optional]: 如果一个节点发生故障时执行的回调函数(失败节点是第一个参数)。
• success [可选]:如果一切正常，将执行的回调函数。

来源:

jQuery.fn.extend({
  isOrdered: function(orderBy, data, succ, fail){
    var correct_index = 0, o = 1, f = false, t = this;
    if(orderBy == 'desc') {
      correct_index = this.length - 1;
      o = -1;        
    }
    this.each(function(){
      var current_index = $(this).data('index');
      if(current_index != correct_index) {
        if(fail) fail.call(t, this);
        f = true;
        return false;
      } 
    correct_index += o;
    }); 
    if(!f && succ) succ.call(this, this);
    return this;
  }
});