jQuery:将数据附加到有序列表

时间:2013-10-26 02:39:25

标签: jquery

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

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>

1 个答案:

答案 0 :(得分: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中将列表顺序保存在数组中,或者您知道有关该列表的更多信息,则解决方案可能会更简单。

希望有所帮助。