Поиск индекса элемента списка в jQuery

Question

У меня есть неупорядоченный список из восьми элементов. При загрузке страницы первые пять <li> имеют в них миниатюрные изображения по умолчанию, а на шестом - 1px-1px-образ с идентификатором $('#last'). Когда пользователь вставляет новое изображение, он заменяет «src» $('#last') своим новым изображением. Это не самый эффективный способ, но он работает.

<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') удаляется, и я использую each(), чтобы найти следующую пустую <li> и вставить 1px на 1px изображения в нем, с идентификатором $('#last') так он готов к следующая загрузка изображения.

На данный момент мне нужно, чтобы получить index() в <li>, что теперь имеет 1px на 1px изображение в нем, чей идентификатор $('#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

Как я понимаю, вы можете вставить < IMG ID = "# последний" ... так, чтобы получить индекс() Ли, который #Last

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

Example