javascript - 如何从 ul 图像中获取 img src 属性？

Question

<ul id="ulGall">
<li><img src="gaLL/red.jpg"/></li>
<li><img src="gaLL/blue.jpg"/></li>
<li><img src="gaLL/white.jpg"/></li>
<li><img src="gaLL/orange.jpg"/></li>
</ul>

.

$(document).ready(function() {
 x = 0;
 z = $('#ulGall li').length;
});  

.

$('#btnR').click(function() {
    if(x == z) {x = 1;} 
    else {x = x + 1;} // till here everything works  

    alert ($('ulGall').index =x, src attribute // just as description 

ie - 给我 imgsrc属性 - 在哪里li index = x

所以第一次点击应该是gaLL/red.jpg
Next click -gaLL/blue.jpg等等
橙色 - 红色之后。

Answer 1

您可以像这样在第一个 li 中获取 img 的“src”属性：

$("#ulGall li").eq(0).next("img").attr("src");

.eq() 函数中的数字决定了目标 li 元素中的哪一个 - 第一个元素的索引为 0。

Answer 2

$('#btnR').click(function() {
    if(x == z) {x = 1;} 
    else {x++}   
    var source=$("#ulGall li").eq(x).next("img").attr("src");
    alert(source);
});

这里的技巧是使用 .eq() 根据它的索引选择元素，您也可以直接从选择器中按索引选择一个元素，如下所示：

$("#ulGall li:eq(0)")

Answer 3

您可以使用:eqjQuery 的选择器。

$('#ulGall li:eq(0) img').attr('src')​

Answer 4

尽管您已经接受了答案，但我想我会提供一个替代方案：

function clicks(el){
    if (!el) {
        return false;
    }
    else {
        var i = 0;
        clicks = function(el){
            var kids = $(el).find('img').length,
                which = i < kids ? i : i%kids;
            console.log($(el).find('img').eq(which).attr('src'));
            i++;
        };
        clicks(el);
    }
}

$('#ulGall').click(
    function(){
        clicks(this);
    });​

JS 小提琴演示。

还有一个稍作修改的、较少 jQuery 的函数：

function clicks(el) {
    if (!el) {
        return false;
    }
    else {
        var i = 0;
        clicks = function(el) {

            var imgs = el.getElementsByTagName('img'),
                kids = imgs.length,
                which = i < kids ? i : i % kids;

            console.log(imgs[which].src);
            i++;
        };
        clicks(el);
    }
}

JS 小提琴演示。

Answer 5

For the sake of completeness, it seems that a good jQuery alternative is missing here.

$('button').each(function(){
    var idx = 0, $gallery = $("#ulGall").find("img");
    $(this).click(function(){
        var src = $gallery.eq(idx).attr("src");
        idx = (idx == $gallery.length - 1) ? 0 : idx + 1;
    });
});​

A live example.