jQuery跨度文本复制并用作宽度

Question

我试图将跨度文本值复制到html宽度值但我不能让它工作？

使用下面的代码我设法复制文本，但我如何将其设置为p元素的宽度？

$('.duplicate').text(function() {
  return $(this).closest('ul li').find('em').text();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    <p class="duplicate"></p>
    <em>100</em>
  </li>
  <li>
    <p class="duplicate"></p>
    <em>200</em>
  </li>
  <li>
    <p class="duplicate"></p>
    <em>300</em>
  </li>
</ul>

Answer 1

您需要应用函数将值返回到width()，而不是text()：

$('.duplicate').width(function() {
  return $(this).closest('ul li').find('em').text();
});

p.duplicate {
  min-height: 10px; /* just for testing */
  background-color: #CCC;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    <p class="duplicate"></p>
    <em>100</em>
  </li>
  <li>
    <p class="duplicate"></p>
    <em>200</em>
  </li>
  <li>
    <p class="duplicate"></p>
    <em>300</em>
  </li>
</ul>