Question

我有这样的html树

<div class="parent">
  <div class="child-1">
  </div>
  <div child="child-2">
  </div>
</div>
<div class="parent">
  <div class="child-1">
  </div>
  <div child="child-2">
  </div>
</div>

我需要计算“ child-2”的宽度等于“ parent”减去“ child-1”的宽度。对于每个父级div。我有类似的东西，但没有工作属性。

$("parent").each(function(){
  var all = $(this).width();
  var child = $(this).children("child-1").width();
  var good = all - child;
  $("child-2").width(good);
});

您能帮我吗？

Answer 1

您需要在html和脚本中进行一些修改

将child="child-2"更改为class="child-2"
用户点.选择器可获取类名称为$('.parent')的div元素
使用$(this).find()获取正确的子元素

$(function() {
  $(".parent").each(function() {
    var all = $(this).width();
    var child = $(this).find(".child-1").width();
    //console.log(all);
    //console.log(child);
    var good = all - child;
    //console.log(good);
    $(this).find(".child-2").width(good);
  });
})

.parent {
border: 1px solid red;
height:100px;
width: 100%;
}
.child-1 {
border: 1px solid green;
height:100px;
width: 60%;
}
.child-2 {
border: 1px solid blue;
height:100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
  <div class="child-1">child 1
  </div>
  <div class="child-2"> child 2
  </div>
</div>
<div class="parent">
  <div class="child-1"> child1
  </div>
  <div class="child-2">child2
  </div>
</div>

Answer 2

您缺少类选择器，它是一个点，请尝试以下操作：

$(".parent").each(function(){
  var all = $(this).width();
  var child = $(this).children(".child-1").width();
  var good = all - child;
  $(".child-2").width(good);
});

编辑：

就像@Bhushan Kawadkar告诉的那样，您需要将孩子换成班级：

<div class="parent">
  <div class="child-1">
  </div>
  <div class="child-2">
  </div>
</div>
<div class="parent">
  <div class="child-1">
  </div>
  <div class="child-2">
  </div>
</div>

计算div宽度

2 个答案: