Question

我有一个包含八个项目的无序列表。在页面加载时，前五个<li>中包含默认缩略图图像，第六个具有1px x 1xx占位符图像，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 1xx图片，其中ID为$('#last')，因此可以进行下一次图片上传。

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

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

Answer 1

以下所有建议均基于以下假设：插入新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

据我所知，你可以插入＆lt; img id =“＃last”...所以得到具有#last

的li的index（）

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

Example

在jQuery中查找列表项的索引

3 个答案: