Question

内部视图页面我有几个div，其id以my-前缀开头，

<div id="my-div1"><img src="/img/1.jpg" /></div>
<div id="my-div2"><img src="/img/2.jpg" /></div>
<div id="my-div3"><img src="/img/3.jpg" /></div>

在js代码中我通过每个元素迭代，我想应用某个函数子img元素，在这种情况下是backstretch

$(document).ready(function () {
     $('div[id^="my-"]').each(function () {
         $(this).css("background-size", "100% 100%");
         $(this).css("background-repeat", "no-repeat");  
         // this doesn't work              
         $(this).children("img").backstretch($(this).attr('src'));
     })
});

当我测试$(this).children("img").length时返回每个div下的img的实际数量，但我不知道如何将它的src属性值传递给backstretch函数？

Answer 1

基于the documentation，它看起来不像backstretch支持传入函数（jQuery setter函数的方式），所以你坚持使用each：< / p>

$(this).children("img").each(function() {
    $(this).backstretch(this.src);
});

请注意，我并不打算使用jQuery访问src，已经准备好等待的DOM属性了。： - ）

或者，如果您要将backstretch应用于 div ，因为每个div只有一个图片，您可以这样做：

$(this).backstretch($(this).find("img").attr("src"));

attr将返回div中第一张图片的src。

最后，由于backstretch支持多个图片作为幻灯片显示，如果您的div将拥有多个图片，您可以使用children("img").map(...).get()来获取数组他们的src 属性：

$(this).backstretch($(this).children("img").map(function() {
    return this.src;
}).get());

Answer 2

试试这个：

$(document).ready(function () {
     $('div[id^="my-"]').each(function () {
         $(this).children("img").each(function() {
             $(this).backstretch($(this).attr("src"));
         });
     })
});

访问子属性值

2 个答案: