Question

我有一个带有编号数据顺序属性的列表。这个属性不一定像1,2,3,4这样的序列......而是在没有确定增加的情况下增长的数字序列，如8,30,201,380。

我想要做的是使用jquery在此列表中插入一个元素，尊重顺序，因此，如果新元素的数据顺序为58，则它将介于30和201之间......

由于元素不是一个设定的增量序列，一个简单的查找和插入工作，任何关于如何实现这一点而不浪费太多处理的想法？

Answer 1

假设......

$ul是列表节点（jQuery-wrapped）
$li是要插入的列表项（jQuery-wrapped）

var o = $li.appendTo($ul).data('order');//initially, append $li to end of the list, and read its order attribute.
$ul.find("li").each(function() {
    if(o < $(this).data('order')) {
        $li.insertBefore(this); //if $li's order` is less than current item's order, then move $li above current item.
        return false; //break
    }
});

如果在扫描期间未满足o < $(this).data('order')条件，则新列表项将保留在列表的末尾。

<强> DEMO

Answer 2

在查询DOM（ with jQuery methods ）时，会返回它们在DOM中出现的序列中的元素。

所以过滤你的元素，然后在最后一个项目之后插入一个小于新项目的值。

  var newElementOrder = 10 // dummy value;

  var all = $('li[data-order]'),
      less = all.filter(function() {
          return +$(this).data('order') < newElementOrder;
      });

  if (less.length) {
    less.last().after(newElement);
  } else {
    all.first().before(newElement);
  }

完整演示

$('.add').on('click', function() {
  var newElementOrder = +$('.add-value').val(),
    newElement = $('<li data-order="' + newElementOrder + '">Item with order #' + newElementOrder + '</li>');

  var all = $('li[data-order]'),
    less = all.filter(function() {
      return +$(this).data('order') < newElementOrder;
    });

  if (less.length) {
    less.last().after(newElement);
  } else {
    all.first().before(newElement);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<ul>
  <li data-order="8">Item with order #8</li>
  <li data-order="30">Item with order #30</li>
  <li data-order="201">Item with order #201</li>
  <li data-order="380">Item with order #380</li>
</ul>

<button class="add">add after</button>
<input type="text" class="add-value" />

在列表中关于数据顺序属性</li>的<li>元素中插入<li>元素

2 个答案: