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

即。 - 给我img src属性 - 其中li index = x

首先点击应该是gaLL/red.jpg
接下来点击 - 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

您可以使用jQuery的:eq选择器。

$('#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 Fiddle demo

还有一个稍微修改过的，不那么简单的函数：

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 Fiddle demo

Answer 5

为了完整起见，似乎缺少一个好的jQuery替代方案。

$('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.

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

5 个答案: