在jQuery中查找列表项的索引

Question

我有一个八项的无序列表。在页面加载时，前五个<li> 中有默认缩略图，第 6 个有一个 1px x 1px 占位符图像，ID 为$('#last')。当用户插入新图像时，它会用他们的新图像替换$('#last') 的“src”。这不是最有效的方法，但确实有效。

<ul>
    <li><img src="img1.png" /></li>
    <li><img src="img2.png" /></li>
    <li><img src="img3.png" /></li>
    <li><img src="img4.png" /></li>
    <li><img src="img5.png" /></li>
    <li><img src="1px.png" id="last"/></li>
    <li></li>
    <li></li>
</ul>

当用户添加新图像时，$('#last') 的 ID 被删除，我使用each() 找到下一个空的<li> 并在其中插入 1px x 1px 图像，ID 为 $('#last') 所以它已准备好进行下一次图像上传。

此时我需要获取<li> 的index()，其中现在有1px x 1px 图像，其ID 为$('#last')，以便我可以将索引存储在会话中，所以当用户返回到$('#last') ID 仍然设置并准备接受另一个图像的页面。

我如何获取包含该图像的<li> 的索引，因为它是在页面加载后设置的？有没有办法使用delegate() 或on() 来获取它？即如何获取页面加载后设置的元素的索引？

Answer 1

以下所有建议均基于以下假设：这些脚本的 sn-ps 将在插入新的 li 之后运行。

要获取最后一个 li 元素的索引：

var lastLi = $('ul li:last').index();

有条件地这样做，检查它是否有匹配的src：

var lastLi = $('ul li').filter(
                 function(){
                     return $(this).attr('src') == '1px.png';
                 });

假设最后一个li 将总是包含占位符图像：

var lastLi = $('#last').index();

参考资料：

• :last selector。
• attr()。
• filter().
• index()。

Answer 2

开始于：

<ul>
    <li><img src="img1.png" /></li>
    <li><img src="img2.png" /></li>
    <li><img src="img3.png" /></li>
    <li><img src="img4.png" /></li>
    <li><img src="img5.png" /></li>
</ul>

而且每次添加图片时：

$('ul').append('<li><img src="imgn.png" /></li>');

其中“imgn.png”是新图像文件的名称。在任何时候，如果您需要知道列表中有多少张图片：

$('ul li').length

但是，如果始终有 8 个列表元素很重要：

<ul>
    <li><img src="img1.png" /></li>
    <li><img src="img2.png" /></li>
    <li><img src="img3.png" /></li>
    <li><img src="img4.png" /></li>
    <li><img src="img5.png" /></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

function addImage(url){
    $('ul li:empty').first().html('<img src="' + url + '" />');
}
addImage('img6.png');

Answer 3

据我了解，您可以插入

var list = $('#last').parent('li');
alert( $('li').index(list) );

Example