使用 JQuery 查找索引与计数变量匹配的项目

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

您的 each 循环遍历每个 li 元素，因此当您在 each 函数中查找 img 时，您正在查看 li 内部：

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

将始终返回零，因为每个 li 内只有 1 个 img。

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')
);