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

Question

我需要一些建议:

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

但我无法让它工作。有什么想法吗？

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