Question

使用jQuery，我需要在下面的UL中添加一个新的列表项，但它需要在最后一个具有class="more"的列表项之前。

<div class="nav nav-tabs">
    <ul class="nav nav-tabs sub-nav" >
        <li class="hor-menu">
            <span class="class-a" >AA</span>            
        </li>
        <li class="hor-menu">
            <span class="class-a" >BB</span>            
        </li>
        <li class="hor-menu">
            <span class="class-a" >CC</span>            
        </li>
        **<<< --- new list item entry to go here --- >>>**
        <li class="more" style="display: none;">
            <span>...</span>
            <ul id="overflow"></ul>
        </li>
    </ul>
</div>

我尝试了以下内容：

$("#nav-tabs ul").append('<li class="hor-menu"><span class="class-a" >DD</span></li>')

但我不确定如何在最后一个li.more项目之前插入它。

Answer 1

您可以像这样使用:last伪选择器来选择集合的最后一个元素

$("li.more:last")

然后您可以使用before在最后一个项目之前插入它。

$("li.more:last").before('<li class="hor-menu"><span class="class-a" >DD</span></li>');

这是一个有效的JSfiddle： https://jsfiddle.net/mervinsamy/0n4g51hk/5/

我还在这里添加了代码片段：

$(document).ready(function(){
  
    $("li.more:last").before('<li class="hor-menu"><span class="class-a" >DD</span></li>');
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="nav nav-tabs">
    <ul class="nav nav-tabs sub-nav" >
        <li class="hor-menu">
            <span class="class-a" >AA</span>            
        </li>
        <li class="hor-menu">
            <span class="class-a" >BB</span>            
        </li>
        <li class="hor-menu">
            <span class="class-a" >CC</span>            
        </li>
        <li class="more">
            <span>...</span>
            <ul id="overflow"></ul>
        </li>
        <li class="more">
            <span>...</span>
            <ul id="overflow"></ul>
        </li>
        <li class="more">
            <span>...</span>
            <ul id="overflow"></ul>
        </li>
        <li class="more">
            <span>...</span>
            <ul id="overflow"></ul>
        </li>
    </ul>
</div>

Answer 2

第一个选项

$('.more').before('<li class="hor-menu"><span class="class-a" >DD</span></li>');

第二个选项

首先让我们获得more类的位置。

var pos = $('nav-tabs > li').index($('.more'));

然后将其添加到DOM

$('ul > li:eq('+pos+')')
    .before('<li class="hor-menu"><span class="class-a" >DD</span></li>');

如何使用类在另一个特定列表项之前添加新列表项？

2 个答案: