gpt4 book ai didi

Javascript:如果对象内另一个元素高于 X 像素,则为该元素添加边距。页面上有多个对象

转载 作者:行者123 更新时间:2023-12-03 02:06:42 25 4
gpt4 key购买 nike

我有一个对象(div),里面有两个元素(带有类)。

任务:当元素A的高度低于40px时,给元素B添加22px的margin-top。

但是页面上有很多对象,以下代码仅查找第一个元素 A(具有类 .list 名称)并向所有元素 B(具有类 .product-image-container)添加边距。

if ($('.list-name').height() < 40) {

$('.product-image-container').css('margin-top','22px');
}

预先感谢您的帮助

最佳答案

这是您所需的解决方案,

  • 循环所有list-name使用 $('.list-name').each() 的类(class)功能。
  • 获取下一个product-image-container使用 (obj).next('.product-image-container') 更接近它
  • 更改您需要的 CSS,如 $(obj).next('.product-image-container').css('margin-top', '20px')

$(document).ready(function(){
$('.list-name').each(function(index, obj){
console.log($(obj).height())
if($(obj).height() > 20)
{
$(obj).next('.product-image-container').css('background', 'green')
}
});


});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

<div>
<div class="list-name" style="height: 20px">list-name 1</div>
<div class="product-image-container">product-image-container 1</div>
</div>

<div>
<div class="list-name" style="height: 40px">list-name 2</div>
<div class="product-image-container">product-image-container 2</div>
</div>


</body>
</html>

请运行上面的代码片段

Here is a Working DEMO

关于Javascript:如果对象内另一个元素高于 X 像素,则为该元素添加边距。页面上有多个对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49774621/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com