0

我有八个项目的无序列表。在页面加载时，前五个<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>

当用户添加新图像时，ID$('#last')被删除，我用它each()来查找下一个空<li>图像并将 1px x 1px 图像插入其中，ID 为，$('#last')以便为下一次图像上传做好准备。

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

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

4

3 回答 3

0

以下所有建议都基于这些脚本片段将在插入新脚本后运行的假设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();

参考：

于 2012-06-06T22:07:17.443 回答
0

据我了解，您可以插入 < img id="#last"... 以获取具有 #last 的 li 的 index()

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

例子

于 2012-06-06T22:36:07.033 回答
0

从...开始：

<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');
于 2012-06-06T22:19:52.847 回答