Поиск элемента с помощью JQuery, чей индекс совпадает с переменной count

Question

У меня настроен скроллер изображения, и я веду счет текущего элемента через переменную с именем current_item. Теперь я хочу отобразить альтернативный текст изображения в списке изображений, индекс которых соответствует item_count.

Вот JQuery

var scroll_text = $('#ax_campaign_content li').index(current_item).children('img').attr('alt');
$('#ax_campaign_scroller h4').text(scroll_text);

И это основная структура HTML:

<div id="ax_campaign_content">
    <ul>
    <li><img alt="Image 1"></li>
    <li><img alt="Image 2"></li>
</ul>
</div>

<div id="ax_campaign_scroller">
    <h4>Image Text Goes Here</h4>
</div>

Это то, что я пытаюсь сделать, но это не работает. Кто-нибудь видит, где я иду не так?

Answer 1

Ваш код будет повторять li элементы, а затем итерировать изображения внутри этого li, который всегда будет только одним изображением. То, что вы делаете, никогда не будет иметь ничего общего с current_item переменная.

Вместо этого вы можете попробовать пройти current_item в .eq сначала получить li элемент с этим индексом, а затем получить изображение alt атрибут:

var scroll_text = $("#ax_campaign_content li")
    .eq(current_item)
    .find("img").attr("alt");

$("#ax_campaign_scroller h4")
    .text(scroll_text);

Или вы можете сделать это с помощью одной строки (добавлены новые строки и вкладки для удобства чтения) и выбрать изображение в том же селекторе, не используя .find:

$("#ax_campaign_scroller h4").text(
    $("#ax_campaign_content li:eq("+current_item+") img")
        .attr("alt")
);

Answer 2

Попробуйте метод eq - http://api.jquery.com/eq/

$('#ax_campaign_content li img').eq(current_item).attr('alt');

Answer 3

Каждый из них проходит по каждому элементу li, поэтому, когда вы ищите img внутри каждой функции, вы просматриваете внутри li:

$(this).children("img").index()

Всегда будет возвращать ноль, так как у вас есть только 1 img внутри каждого li.

Jquery.each уже дает вам индекс, так что вы можете просто проверить его с вашим current_item следующим образом:

$('#ax_campaign_content li').each(function(index) {
        if (index == current_item){
        scroll_text = $(this).children('img').attr('alt');
        $('#ax_campaign_scroller h4').text(scroll_text);
    }
});

Отвечая на обновленный комментарий: Вы всегда можете перейти на однострочник!

$('#ax_campaign_scroller h4').text(
    $('#ax_campaign_content li').eq(current_item).children('img').attr('alt')
);