javascript - 遍历每一行并使p标签具有相同的高度

我需要与此有关的一些建议：

<div class="container p-rows">
  <div class="row">
    <div class="col-lg-6">
      <p class="ck-edit-col-bodytext">some text</div>
    </div>

    <div class="col-lg-6">
      <p class="ck-edit-col-bodytext">some more more text</div>
    </div>
  </div>

  <div class="row">
    <div class="col-lg-6">
      <p class="ck-edit-col-bodytext">some text</div>
    </div>

    <div class="col-lg-6">
      <p class="ck-edit-col-bodytext">some more more text</div>
    </div>
  </div>

  <div class="row">
    <div class="col-lg-6">
      <p class="ck-edit-col-bodytext">some text</div>
    </div>

    <div class="col-lg-6">
      <p class="ck-edit-col-bodytext">some more more text</div>
    </div>
  </div>

  <!-- some more rows -->
</div>

每行中的每个p标记都有不同的高度，具体取决于其中的文本量。我想做的是遍历每一行并检测哪个p标签具有最多的height。然后，使行内的所有其他p标签具有相同的高度。

我的尝试：

var pTagHeight = -1;
jQ('.p-rows .row').each(function() {
  pTagHeight = pTagHeight > jQ('.ck-edit-col-bodytext').height() ? pTagHeight : jQ('.ck-edit-col-bodytext').height();
  jQ('.ck-edit-col-bodytext').height(pTagHeight);
  pTagHeight = -1;
});

但我无法正常工作。有任何想法吗？

最佳答案

您需要首先遍历每一行并计算出该行中最高的p标签，然后将该高度应用于所有相关的p。

尝试这个：

jQ('.p-rows .row').each(function() {
    var $p = jQ(this).find('p');
    var heights = $p.map(function(i, e) { return jQ(e).height(); }).get();
    $p.height(Math.max.apply(this, heights));
});