访问儿童属性值

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元素，在这种情况下，直道

$(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')); 
    }) 
}); 

当我测试的每个格下的IMG $(this).children("img").length回报实际数目，但我不知道如何通过它的src属性值直道功能？

Answer 1

基于the documentation，它看起来并不像backstretch支持函数传递（的方式可能的jQuery setter函数做的），所以你坚持each：

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

请注意，我不打扰使用jQuery来访问src，那里已经有一个DOM属性准备好了，正在等待。 :-)

或者，如果你想申请backstretch到DIV，因为每个div都只有一个形象，你可以这样做：

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

attr将返回第一个图像的src div。

最后，由于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")); 
     }); 
    }) 
});