【jQuery】それぞれの要素のウォーターマークを入れる

append(), each()

by tea4two

HTML

<ul id="gal">
    <li><a href="#"><img src="http://placekitten.com/g/140/105" /></a></li>
    <li><a href="#"><img src="http://placekitten.com/140/105" /></a></li>
    <li><a href="#"><img src="http://placekitten.com/g/140/105" /></a></li>
    <li><a href="#"><img src="http://placekitten.com/140/105" /></a></li>
    <li><a href="#"><img src="http://placekitten.com/g/140/105" /></a></li>
</ul>

CSS

body {
    padding: 10px;
    background: #eee;
}
ul#gal li {
    float: left;
    width: 140px;
    padding: 5px;
    margin: 0 5px 5px 0;
    background: #fff;
    position: relative;
}
#gal li span {
    position: absolute;
    top: 8px;
    left: 8px;
    color: #fff;
    font-size: 65%;
    font-family: verdana, serif;
    text-shadow: 0 0 3px rgba(0,0,0,0.7);
}

JavaScript

$(function () {
  $("#gal li").each(function(){
    $(this).append("<span>&copy;kitten</span>");
  });
});