如何修剪数组中每个元素的最后两个字符？答案

【问题标题】：How to trim last two characters of each element in an array?如何修剪数组中每个元素的最后两个字符？
【发布时间】：2016-11-15 23:25:30
【问题描述】：

在这里，我得到一个宽度值数组。因为它在每个元素的末尾包含px。我需要修剪px 并将其存储在数组中。

HTML

<table id="mytable">
  <thead>
    <tr>
      <th style="width:40px;display:none;">Head1</th>
      <th style="width:50px">Head2</th>
      <th style="width:60px">Head3</th>
      <th style="width:70px">Head4</th>
      <th style="width:80px">Head5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="width:40px;display:none;">1</td>
      <td style="width:50px">2</td>
      <td style="width:60px">3</td>
      <td style="width:70px">4</td>
      <td style="width:80px">5</td>
    </tr>
  </tbody>
</table>

jQuery

var listWidth = $("#mytable tr th").map(function() {
  if($(this).is(":visible")){
    return this.style.width;
  }
}).get();
for (var i = 0; i < listWidth.length; i++) {
  listWidth[i].slice(0, -1);
}
console.log(listWidth);

我尝试过使用slice，但没有结果。

Demo fiddle

【问题讨论】：

其实是有结果的，你却忽略了。
如果格式总是像'30px'，你可以使用parseInt(string, 10);否则，映射数组并切出最后两个字符。
我知道每个人都会建议你最好的方法，但为了你的理解，你并没有保存 slice 的结果，所以listWidth[i]=listWidth[i].slice(0, -1); 应该可以工作

标签： javascript jquery html css arrays

【解决方案1】：

获取内联width

我想要内联样式的 CSS 宽度

var listWidth = $("#mytable tr th:visible").map(function () {
    return parseInt(this.style.width, 10);
}).get();

Fiddle Demo

获取计算宽度

使用width()。 width() 会给你没有px 的数字宽度。

var listWidth = $("#mytable tr th:visible").map(function () {
    return $(this).width();
}).get();

Updated Fiddle

要获得内联 width（如果存在），则获取计算宽度

var listWidth = $("#mytable tr th:visible").map(function () {
    return parseInt(this.style.width, 10) || $(this).width();
}).get();

Updated Fiddle

【讨论】：

在this 情况下不起作用
@Hazard 如果您查看您提供的演示的console，它将显示[47, 53, 59, 65]。所以，width() 会为您提供正确的值，即使它没有设置。
我想要内联样式的 CSS 宽度
@Hazard return +($(this).attr('style').match(/width:\s*(\d+)/i) || [])[1] || $(this).width();
这个答案在这个用例中没有必要非常复杂。

【解决方案2】：

如果您只想跳过数组中的px，您可以使用parseInt 函数：

var listWidth = $("#mytable tr th").map(function() {
  if($(this).is(":visible")){
    return parseInt(this.style.width, 10);
  }
}).get();
console.log(listWidth);

demo

【讨论】：

【解决方案3】：

试试：

演示：https://jsfiddle.net/pn9pr0zz/

var listWidth = $("#mytable tr th").map(function() {
if($(this).is(":visible")){
  return $(this).css("width").slice(0,-2); // get width using .css() and use .slice() over here to remove px from string 
  }
}).get();
console.log(listWidth);

【讨论】：

【解决方案4】：

var listWidth = $("#mytable tr th").map(function() {
if($(this).is(":visible")){
  return this.style.width;
  }
}).get();
var arr = []
for (var i = 0; i <= listWidth.length ; i++ ) {
        if ( listWidth[i] === undefined ) {
            break;
    }
        var lWidth = listWidth[i].replace(/px/, "");
    arr.push(lWidth);
}
console.log(arr)

【讨论】：

【解决方案5】：

$(document).ready(function() {
    var listWidth = $("#mytable tr th").map(function() {
        if ($(this).is(":visible")) {
            return this.style.width;
        }
    }).get();
    for (var i = 0; i < listWidth.length; i++) {
        listWidth[i] = listWidth[i].slice(0, -2); //PAY ATTENTION HERE
    }
    console.log(listWidth);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable">
    <thead>
      <tr>
        <th style="width:40px;display:none;">Head1</th>
        <th style="width:50px">Head2</th>
        <th style="width:60px">Head3</th>
        <th style="width:70px">Head4</th>
        <th style="width:80px">Head5</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td style="width:40px;display:none;">1</td>
        <td style="width:50px">2</td>
        <td style="width:60px">3</td>
        <td style="width:70px">4</td>
        <td style="width:80px">5</td>
      </tr>
    </tbody>
  </table>

【讨论】：