如何选择类的每个实例的子类

How can I select descendents of each instance of a class?

本文关键字：实例 子类 何选择 选择      更新时间：2023-09-26

这是我的代码的简化版本。

<div class="row">
    <div class="column">
    </div>
    <div class="column">
    </div>
</div>
<div class="row">
    <div class="column">
    </div>
</div>
<div class="row">
    <div class="column">
    </div>
    <div class="column">
    </div>
    <div class="column">
    </div>
</div>

我试图在每个"行"DIV中添加每个"列"DIV的高度。换句话说，我想在第一个"行"中添加两个"列"的DIV；第二个"行"DIV中的一个"列"DIV；以及第三个"行"DIV中的三个"列"DIV。我该怎么做？

如果我理解你的要求。。。

// Loop through each .row...
$('.row').each(function(i) {
  var totalHeight = 0;
  // Loop though descendant .column's in this .row...
  $(this).find('.column').each(function() {
    // Add .column height to total...
    totalHeight += $(this).height();
  })
  // do something with the total...
  console.log('columns in row ' + i + ' have a total height of ' + totalHeight + 'px');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
  <div class="column">
    Column
  </div>
  <div class="column">
    Column
  </div>
</div>
<div class="row">
  <div class="column">
    Column
  </div>
</div>
<div class="row">
  <div class="column">
    Column
  </div>
  <div class="column">
    Column
  </div>
  <div class="column">
    Column
  </div>
</div>

(单击run code snippet查看工作示例(；

function SetColumnHeightCtrl($) {
  var rows = $('.row');
  
  rows.each(function(index) {
    var height = 0;
    var $row = $(this);
    
    $row.find('.column').each(function() {
      var $column = $(this);
      height += $column.height();
    });
    
    console.log(`${index} row height:`, height);
    $row.css('height', height);
  });
}
jQuery(document).ready(SetColumnHeightCtrl);
.row { background: lightseagreen; display: flex; padding: 5px; margin-bottom: 1em; }
.column { background: lightcoral; margin: 0 5px; flex: 1 1 auto; }
.column:nth-child(odd) { height: 30px; }
.column:nth-child(even) { height: 70px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
    <div class="column"></div>
    <div class="column"></div>
</div>
<div class="row">
    <div class="column"></div>
</div>
<div class="row">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
</div>

一个简单的$("div.row>div.column")就足以选择div with class row内的每个div with class column，并使用.height()来计算当前高度。

代码：

$("div.row>div.column").each(function() {
   sum += ($(this).height());
});


$(function() {
  console.log(calc());
});
function calc() {
  var sum = 0;
  $("div.row>div.column").each(function() {
    sum += ($(this).height());
  });
  return sum;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
1
<div class="row">
  a
  <div class="column">
    b
  </div>
  <div class="column">
    c
  </div>
  d
</div>
2
<div class="row">
  e
  <div class="column">
    f
  </div>
  g
</div>
3
<div class="row">
  h
  <div class="column">
    i
  </div>
  j
  <div class="column">
    k
  </div>
  l
  <div class="column">
    m
  </div>
  n
</div>
4

$(document).ready(function() {
	var height = 0;
	$('.row').children('.column').each(function() {
	    height += $(this).height();
	});
	console.log(height);
});
.column {
    height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
    <div class="column">
    </div>
    <div class="column">
    </div>
</div>
<div class="row">
    <div class="column">
    </div>
</div>
<div class="row">
    <div class="column">
    </div>
    <div class="column">
    </div>
    <div class="column">
    </div>
</div>

返回1800

相关文章：