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);

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

Answer 2

试试这个： -

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

jquery儿童选择器不起作用？

2 个答案: