下拉& # 39;ul # 39;& # 39;李# 39;在附加值之后获取最后一个值

Dropdown 'ul' 'li' getting last value after append values

本文关键字:获取 最后一个 之后 ul 下拉 附加值      更新时间:2023-09-26

在附加值之后获取最后值有问题。

例子:

alert($('#ulscroller li:last-child').last().val());
$('#ulscroller li:last-child').append('<li value="21">21</li><li value="22">22</li><li value="23">23</li>');
alert($('#ulscroller li').last().val());
$('#ulscroller li:last-child').append('<li value="24">24</li><li value="25">25</li><li value="26">26</li>');
alert($('#ulscroller li').last().val());

预警结果:

20
23
25

问题在结果中。2倍24,25,26

检查这个提琴:http://jsfiddle.net/f5v6R/171/

有人知道怎么解决它吗?

谢谢。

详细说明一下你的问题:

你是这样开始的:

<ul id="ulscroller">
    <li value="1" class="selected">1</li>
    <li value="2">2</li>
    ...
    <li value="19">19</li>
    <li value="20">20</li>
</ul>

,你想添加一些额外的<li>元素来得到这个:

<ul id="ulscroller">
    <li value="1" class="selected">1</li>
    <li value="2">2</li>
    ...
    <li value="19">19</li>
    <li value="20">20</li>
    <li value="21">21</li>
    <li value="22">22</li>
    <li value="23">23</li>
    <li value="24">24</li>
    <li value="25">25</li>
    <li value="26">26</li>
</ul>

使用$('#ulscroller li:last-child')选择列表中的最后一个<li>,但使用.append()然后将这些新的<li>元素添加到最后一个<li>中,因此,在第一个追加之后,您最终得到

<ul id="ulscroller">
    <li value="1" class="selected">1</li>
    <li value="2">2</li>
    ...
    <li value="19">19</li>
    <li value="20">20
        <li value="21">21</li>
        <li value="22">22</li>
        <li value="23">23</li>
    </li>
</ul>

现在使用$('#ulscroller li:last-child')将最终选择两个不同的<li>元素:

<li value="20">20
    <li value="21">21</li>
    <li value="22">22</li>
    <li value="23">23</li>
</li> 

<li value="23">23</li>

第二个append然后将新的<li>元素插入到中的中,导致重复的24 25 26。通过使用.after()而不是.append(),新的<li>被添加到与其他<li>相同的级别,因此只有一个列表,$('#ulscroller li:last-child')将只返回一个选定的元素。@Tamil Selvan的评论在这种情况下会给出相同的结果,因为$('#ulscroller').append总是在<ul>

的末尾添加新元素。