Question

这里我得到一个宽度值数组。因为它在每个元素的末尾包含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

Answer 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

Answer 2

尝试：

演示：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);

Answer 3

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

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

demo

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

Answer 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>

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

5 个答案: