jquery - jQuery：将数据附加到有序列表

Question

我有一个列表，每个项目都有一个编号的类。我想在特定类之后附加数据，但问题是项目编号可能不存在。有一个简单的解决方案吗？

data = '<li class="3"></li>';
num = 2;

$('ul .'+num).append(data);

<ul>
    <li class="1"></li>
    // data should be appened here
    <li class="5"></li>
</ul>

Answer 1

一个简单的解决方案是执行以下操作：

• 检查具有该类的元素是否存在。如果没有，请进行迭代，直到找到下一个最大元素并将元素添加到它之前。

如果您真的想要性能，您可以进行二分搜索，这样您就不会过多地查询 DOM。

var data = '<li class="3"></li>';
var $ul = $('ul');
var num = 2;

var $li;
var $currentLi = $ul.find('li.' + num);
// Go through the iterative search if the li wasn't found.
if ($currentLi.length === 0) {
    // Iterate and find the right spot
    var $lis = $ul.find('li');

    var elIndex = 0;
    var currentNumber = $lis.first();
    // Iterate until we found the sweet spot or we're at the end of the lis
    while (currentNumber < num && elIndex < $lis.length) {
        ++elIndex;
        $currentLi = $lis.eq(elIndex);
        currentNumber = parseInt($currentLi.attr('class'));
    }
    // By here you will have the $currentLi found.
}
$currentLi.append(data);

如果您将列表顺序保存在 javascript 中的数组中，或者您了解有关列表的更多信息，则解决方案可能会更简单。

希望这会有所帮助。