jquery追加触发器更大的地方

Question

我正在尝试将孩子附加到列表中，但我想做的是将它附加到按数据价格排序的地方。

我的模板：

<ul>
    <li data-price="18"></li>
    <li data-price="27"></li>
    <li data-price="28"></li>
    <li data-price="31"></li>
    <li data-price="99"></li>
    <li data-price="101"></li>
    <li data-price="191"></li>
</ul>

到目前为止我尝试过的我的 js：

var template = '<li data-price="100"></li>';
$('ul').find('li').filter(function() {
    return $(this).attr("data-price") > 99;
}).after(template);

因此，如果价格为 100，则应附加价格排序，在这种情况下，价格大于 99 但小于 101，但我没有任何可行的解决方案。

Answer 1

我不确定这是否是最好的方法以及它是否总是有效，但它适用于您的问题。试试看

var template = '<li data-price="100">100</li>';
var checkPrice = $(template).attr("data-price");
var appendBefore = $('ul li').filter(function(){
  return parseInt($(this).attr("data-price")) > checkPrice-1;
})[0];
console.log(appendBefore);
$(appendBefore).before(template);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li data-price="18">18</li>
    <li data-price="27">27</li>
    <li data-price="28">28</li>
    <li data-price="31">31</li>
    <li data-price="99">99</li>
    <li data-price="101">101</li>
    <li data-price="191">191</li>
</ul>

Answer 2

检查是否是您需要的：

https://jsfiddle.net/3er0da9c/

var template   = '<li data-price="100"></li>';
var itemValue  = parseInt($(template).attr('data-price')); //Getting value that we should compare
var value, smaller = 0, smallerItem; //We will need those variables to know where to place our "template"


smallerItem = $('ul > li:first-of-type'); //Set the smaller item in our list to be the first one. Change that if your list wont be always asc sorted

$('ul > li').each(function(){ //run through the given list
      value = parseInt($(this).attr('data-price'));
      if ((itemValue == value) || ( itemValue > value )){ //if the actual item is equal, put our item right after it. If the item is smaller then our number, we save it and keep running
         smaller     = value;
         smallerItem = $(this);
      }
});

if (smaller != 0) //This will happens when we have at least one item smaller then our number
      smallerItem.after(template);
else
      smallerItem.before(template); //else, we add our number at top