jquery儿童选择器不起作用？

Question

我有这个代码

$(".cloud").each(function(index, element) {
  var x = (Math.random() * 80) + 1;
  var y = (Math.random() * 80) + 1;
  if (!$(this).attr('id')) {
    $(this).css("top", y + '%');
    $(this).css("left", x + '%');
    $(this).children('a').css("top", y + '%');
    $(this).children('a').css("left", x + '%');
  }
});

我试图移动我的云图片,那个有.cloud类(和一个应该在它上面的href文本)到一个随机位置.但是,href文本应位于云端.所以我试图做的是,我迭代每个具有.cloud类的元素,然后尝试设置其子元素的CSS.但我只移动云,而不是href文本.我在这里错过了什么？

这是我的标记:

<section>
    <div style="height:100%; width: 100%">
        <img src="cloud.png" class="cloud"> <a href="#contact" id="contact" class="cloud">contact</a></img>
        <img src="cloud.png" class="cloud"> <a href="#about" id="about" class="cloud">about</a></img>
        <img src="cloud.png" class="cloud"> <a href="#work" id="work" class="cloud">work</a></img>
        <img src="cloud.png" class="cloud"> </img>
        <img src="cloud.png" class="cloud"> </img>
    </div>

</section>

Answer 1

img 元素不允许生孩子 - 他们是"自我关闭"标签,你应该这样写:

<img src="cloud.png" class="cloud" />

然后你的链接是兄弟元素,因此你应该使用next()方法而不是children()

$(this).next('a').css({
    "top"  : y + "%",  
    "left" : x + "%"
});

作为旁注,您可以指定具有所有CSS属性的对象,并保存对该jQuery函数的一些额外调用,因此代码变为

var cssprops = {
    "top"  : y + "%",  
    "left" : x + "%"
};

$(this).css(cssprops).next('a').css(cssprops);

作为最后的注释,尝试优化代码,您可以使用无序列表而不是a div并将每对"image-link"包装到单个列表项中; 那么你只能将css属性分配给<li>元素