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

您需要将函数应用到 return 值到 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>

jQuery 跨文本复制并用作宽度

jQuery span text copy and use as width

jquery

copy

width