主页 / 问题 / 553479
Accepted
E1mir
Asked:2020-08-09 18:07:12 +0000 UTC2020-08-09 18:07:12 +0000 UTC

减少特定类别标签中的字符数

  • 772

使用该表时，我遇到了一个问题，该表中有以下数据：

  1. 元素编号
  2. 对象名称
  3. 对象类型
  4. 物体坐标

第4点，写物体坐标的地方，坐标太长了，我的任务是缩短这个长度：

这是表格本身：

<table>
  <tr>
    <th>ID</th>
    <th>Name</th>
    <th>Type</th>
    <th>Coordinates</th>
  </tr>
  <tr>
    <td>
      <b><i>16</i></b>
    </td>
    <td>
      TestPoint1
    </td>
    <td>
      Parking
    </td>
    <td>
      <span class="substring">40.381272280500674</span> : <span class="substring">49.842752143408234</span>
    </td>
  </tr>

  <tr>
    <td>
      <b><i>17</i></b>
    </td>
    <td>
      TestPoint2
    </td>
    <td>
      Bankomat
    </td>
    <td>
      <span class="substring">40.382694313910996</span> : <span class="substring">49.84732262756961</span>
    </td>
  </tr>

  <tr>
    <td>
      <b><i>18</i></b>
    </td>
    <td>
      TestPoint3
    </td>
    <td>
      Bank
    </td>
    <td>
      <span class="substring">40.379703105349265</span> : <span class="substring">49.84206549790042</span>
    </td>
  </tr>
</table>

如您所见，坐标很长，您需要缩短它们的长度。

我用 jQuery 写了一个脚本

$(".substring").substring(0,9);

这段代码不起作用，或者我做错了什么。请帮我解决问题。

javascript

2 个回答

  1. Best Answer

    选择器返回与选择器匹配的 DOM 元素数组。自然地，这个数组没有 substring 方法。有必要遍历集合的元素并更改每个元素的文本。对于第一个，您可以使用.each()，对于第二个，您可以使用.text()

    $('.substring').each(function() {
	$(this).text($(this).text().substring(0, 9));
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <tr>
    <th>ID</th>
    <th>Name</th>
    <th>Type</th>
    <th>Coordinates</th>
  </tr>
  <tr>
    <td>
      <b><i>16</i></b>
    </td>
    <td>
      TestPoint1
    </td>
    <td>
      Parking
    </td>
    <td>
      <span class="substring">40.381272280500674</span> : <span class="substring">49.842752143408234</span>
    </td>
  </tr>

  <tr>
    <td>
      <b><i>17</i></b>
    </td>
    <td>
      TestPoint2
    </td>
    <td>
      Bankomat
    </td>
    <td>
      <span class="substring">40.382694313910996</span> : <span class="substring">49.84732262756961</span>
    </td>
  </tr>

  <tr>
    <td>
      <b><i>18</i></b>
    </td>
    <td>
      TestPoint3
    </td>
    <td>
      Bank
    </td>
    <td>
      <span class="substring">40.379703105349265</span> : <span class="substring">49.84206549790042</span>
    </td>
  </tr>
</table>

    • 1

  2. 相邻答案的变体，仅使用方法text

    $('.substring').text(function(index, oldText) {
  return oldText.substring(0, 9);
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <tr>
    <th>ID</th>
    <th>Name</th>
    <th>Type</th>
    <th>Coordinates</th>
  </tr>
  <tr>
    <td>
      <b><i>16</i></b>
    </td>
    <td>
      TestPoint1
    </td>
    <td>
      Parking
    </td>
    <td>
      <span class="substring">40.381272280500674</span> : <span class="substring">49.842752143408234</span>
    </td>
  </tr>

  <tr>
    <td>
      <b><i>17</i></b>
    </td>
    <td>
      Kenan
    </td>
    <td>
      Bankomat
    </td>
    <td>
      <span class="substring">40.382694313910996</span> : <span class="substring">49.84732262756961</span>
    </td>
  </tr>

  <tr>
    <td>
      <b><i>18</i></b>
    </td>
    <td>
      TestPoint3
    </td>
    <td>
      Bank
    </td>
    <td>
      <span class="substring">40.379703105349265</span> : <span class="substring">49.84206549790042</span>
    </td>
  </tr>
</table>

    另外，你可以尝试不用js，只用css来解决。

    .substring {
  max-width: 68px;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
}
    <table>
  <tr>
    <th>ID</th>
    <th>Name</th>
    <th>Type</th>
    <th>Coordinates</th>
  </tr>
  <tr>
    <td>
      <b><i>16</i></b>
    </td>
    <td>
      TestPoint1
    </td>
    <td>
      Parking
    </td>
    <td>
      <span class="substring">40.381272280500674</span> : <span class="substring">49.842752143408234</span>
    </td>
  </tr>

  <tr>
    <td>
      <b><i>17</i></b>
    </td>
    <td>
      Kenan
    </td>
    <td>
      Bankomat
    </td>
    <td>
      <span class="substring">40.382694313910996</span> : <span class="substring">49.84732262756961</span>
    </td>
  </tr>

  <tr>
    <td>
      <b><i>18</i></b>
    </td>
    <td>
      TestPoint3
    </td>
    <td>
      Bank
    </td>
    <td>
      <span class="substring">40.379703105349265</span> : <span class="substring">49.84206549790042</span>
    </td>
  </tr>
</table>

    • 1

相关问题