Поиск элемента с помощью 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')
);